Skip to main content

Usage with HTML

Starting with Tripetto is very easy when you are using HTML. Depending on your project's requirements there are two main Tripetto components to implement:

  • Form Runner component to run forms and collect responses. It handles form execution (including complex logic and response collection), form UI and form UX. Form respondents filling out a form are working in a runner;
  • Form Builder component to create forms. It is a visual UI component that allows building smart flowing forms and surveys like flowcharts in the browser. End users who edit forms are working in the builder.

🏃 Add a form to your HTML project​

To add a form to your project, you first need to create a form. To do so, you can use the Tripetto Studio web app or add the form builder to your project (in case you want to allow users to create forms inside your project). Next, add one of the stock runners to your project and supply the form definition of your form to it.

1️⃣ Implement runner component​

You can immediately display the form runner in HTML. To do so, you need to load the Runner library from a CDN or host the library yourself. If you want to use a CDN, you could go with unpkg, or jsDelivr. This will display the form in the body element of the browser. Here's an example:

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
    <script>
    TripettoAutoscroll.run({
      definition: /* Supply a form definition here. */,
      display: "page" // Let the runner know it runs full-page
    });
    </script>
  </body>
</html>

Run Try on CodePen

▶️ Learn more

🏗️ Add the form builder to your HTML project​

The Tripetto builder package makes it very easy to use the builder in a HTML project.

1️⃣ Implement builder component​

You can immediately display the form builder in HTML. To do so, you need to load the builder library from a CDN or host the library yourself. If you want to use a CDN, you could go with jsDelivr or unpkg. This will display the form builder in the body element of the browser. Here's an example:

<html>
    <body>
        <!-- Load the Tripetto builder library -->
        <script src="https://cdn.jsdelivr.net/npm/@tripetto/builder"></script>

        <!-- Fire it up! -->
        <script>
            Tripetto.Builder.open();
        </script>
    </body>
</html>

Run Try on CodePen

▶️ Learn more