npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

tripetto-collector-rolling

1.5.4 • Public • Published

Tripetto

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

Version License Downloads Pipeline status Join the community on Spectrum Follow us on Twitter

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

Try demo on CodePen View the code

Get started

There a multiple options how you can use this collector for conversational forms. From plain old HTML to React or using imports.

Option A: 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> 

Try demo on CodePen

Option B: Using React

  1. Install the required packages from npm:
$ npm install tripetto-collector
$ npm install tripetto-collector-rolling
  1. Use the React component:
import { Collector } from "tripetto-collector-rolling";
 
ReactDOM.render(
  <Collector
    definition={/** Supply a form definition here. */}
    onFinish={(instance: Collector.Instance) => {
      /** Implement your response handler here. */
    }}
    />,
  document.getElementById("root")
);

View the code

Option C: Import from npm

  1. Install the required packages from npm:
$ npm install tripetto-collector
$ npm install tripetto-collector-rolling
  1. 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 support@tripetto.com. 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.

Keywords

none

install

npm i tripetto-collector-rolling

Downloadsweekly downloads

1,006

version

1.5.4

license

MIT

homepage

gitlab.com

repository

Gitgitlab

last publish

collaborators

  • avatar
  • avatar
  • avatar
Report a vulnerability