Tripetto-collector-standard-bootstrap NPM

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!

Standard Bootstrap collector

This collector package is a graphical UI for Tripetto that implements a classic representation of a form using Bootstrap and React.

Demo

Get started

There a multiple options how you can use this collector. 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-standard-bootstrap"></script>
<script>
TripettoCollectorStandardBootstrap.run({
    element: document.body,
    definition: /** Supply a form definition here. */,
    onFinish: function(instance) {
        /** Implement your response handler here. */
    }
});
</script>

Option B: Using React

Install the required packages from npm:

$ npm install tripetto-collector
$ npm install tripetto-collector-standard-bootstrap

Use the React component:

import { Collector } from "tripetto-collector-standard-bootstrap";

ReactDOM.render(
  <Collector
    definition={/** Supply a form definition here. */}
    onFinish={(instance: Collector.Instance) => {
      /** Implement your response handler here. */
    }}
    />,
  document.getElementById("root")
);

Option C: Import from npm

Install the required packages from npm:

$ npm install tripetto-collector
$ npm install tripetto-collector-standard-bootstrap

Import the rolling collector:

import * as Collector from "tripetto-collector";
import * as CollectorStandardBootstrap from "tripetto-collector-standard-bootstrap";

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