Tripetto is a full-fledged form kit. Rapidly create and deploy smart flowing forms and surveys. Drop the kit in your codebase and use all of it, or just the parts you need. The visual editor is for form creation, the collector for response collection and the SDK for developing more form building blocks. Does this sound too technical? Try the app!

Rolling collector

The rolling collector package brings a graphical UI for respondents that shows them the form’s blocks rolling neatly by, one after the other. This implementation is built using React and Bootstrap and it sits on top of the UI-less (i.e. headless) core collector package. Both this headless core collector and the rolling collector package are needed to run the rolling graphical UI.

Demo

Get started

You can use this collector using plain old HTML or apply a more modern workflow and import the package into your codebase from npm.

Embed in HTML using CDN

<script src="https://unpkg.com/tripetto-collector"></script>
<script src="https://unpkg.com/tripetto-collector-rolling"></script>
<script>
TripettoCollectorRolling.run({
    element: document.body,
    definition: /** Supply a form definition here. */,
    onFinish: function(instance) {
        /** Implement your response handler here. */
    }
});
</script>

Import from npm

1. Install the required packages from npm:

$ npm install tripetto-collector
$ npm install tripetto-collector-rolling

2. Import the rolling collector:

import * as Collector from "tripetto-collector";
import * as CollectorRolling from "tripetto-collector-rolling";

CollectorRolling.run({
    element: document.body,
    definition: /** Supply a form definition here. */,
    onFinish: (instance: Collector.Instance) => {
        /** Implement your response handler here. */
    }
});

Notes

If you want to embed the collector in an element (other than the body) you need to make sure that element is positioned absolute or relative.

Documentation

The complete Tripetto documentation can be found at docs.tripetto.com.

Support

Run into issues or bugs? Report them here and we'll look into them.

For general support contact us at [email protected]. We're more than happy to assist you.

About us

If you want to learn more about Tripetto or contribute in any way, visit us at Tripetto.com.