This package has been deprecated

Author message:

We moved all Tripetto packages to the '@tripetto' organization. Please use 'npm i @tripetto/runner-classic' instead. Full documentation available at: https://tripetto.com/sdk/docs/

tripetto-runner-classic

Tripetto is a full-fledged form kit. Rapidly build and run smart flowing forms and surveys. Drop the kit in your codebase and use all of it or just the parts you need. The visual builder is for form building, and the runners are for running those forms in different UI variants. It is entirely extendible and customizable. Anyone can build their own building blocks (e.g., question types) or runner UI's.

Classic runner

Purpose

This package is a classic form UI for running Tripetto forms and surveys. In this UI the questions and elements (so called blocks) are displayed in a traditional way.

Get started

There are multiple options how you can use this runner. From plain old HTML to React or using imports.

Option A: Embed in HTML using CDN

You need to import the runner foundation script and the classic runner script:

<script src="https://unpkg.com/tripetto-runner-foundation"></script>
<script src="https://unpkg.com/tripetto-runner-classic"></script>
<script>
TripettoClassic.run({
    definition: /** Supply a form definition here. */,
    onSubmit: function(instance) {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(TripettoRunner.Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(TripettoRunner.Export.CSV(instance));
    }
});
</script>

Option B: Using React

1. Install the required packages from npm:

$ npm install tripetto-runner-foundation tripetto-runner-classic react react-dom

2. Use the React component:

import ReactDOM from "react-dom";
import { ClassicRunner } from "tripetto-runner-classic";
import { Export } from "tripetto-runner-foundation";

ReactDOM.render(
  <ClassicRunner
    definition={/** Supply a form definition here. */}
    onSubmit={instance => {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(Export.CSV(instance));
    }}
    />,
  document.getElementById("your-element")
);

Option C: Import from npm

1. Install the required packages from npm:

$ npm install tripetto-runner-foundation tripetto-runner-classic react react-dom

2. Import the runner:

import { run } from "tripetto-runner-classic";
import { Export } from "tripetto-runner-foundation";

run({
    definition: /** Supply a form definition here. */,
    onSubmit: instance => {
      // Implement your response handler here.

      // For this example we output all exportable fields to the browser console
      console.dir(Export.exportables(instance));

      // Or output the data in CSV-format
      console.dir(Export.CSV(instance));
    }
});

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 [e-mail]. We're more than happy to assist you.

License

You are allowed to use this package without a license (and free of charge) as long as you keep the Tripetto branding enabled (which is the default mode). When you want to remove the branding, you need a (paid) license to do so.

Contributors

• Hisam Fahri (Indonesian translation)

About us

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