How to embed a form from the studio into your website

You can share your forms with a simple link, but you can also embed the form in your own website. Additionally to this, you can have full control over the collected data (read more about privacy and GDPR).

Getting the embed code

At the top menu bar of the form builder click Share. The Share pane will show up on the right side of the form builder.

Over there choose for method Embed in a website or application and you will see the embed code at the bottom of the Share pane.

Choose for embedding your form.

Let us first have a look at a simple embedding preview, before we explain the Hosting options.

Embed types

We provide multiple embed codes to let your easily embed the form the way you want. You can select the desired method by selecting one of the following options in the Embed type dropdown:

  • Select HTML - Snippet - The form gets placed inline on the position you place the embed code in your code;
  • Select HTML - iFrame - The form gets loaded inside an iframe on the position you place the embed code in your code;
  • Select HTML - Page - The form is shown in a full page;
  • Select Embed in application - JavaScript - The form gets embedded using ES6 imports on the position you place the embed code in your code. Make sure you also install the required npm packages (command also included in the studio);
  • Select Embed in application - TypeScript - The form gets embedded using imports with annotated types on the position you place the embed code in your code. Make sure you also install the required npm packages (command also included in the studio);
  • Select Go commando - SDK - Build your own collector, or even integrate our form builder in your own software using the SDK. We provide the form definition of the particular form you were working on. More info about the SDK can be found over here.
After you've selected the right embed type, you can copy the whole embed code to your clipboard so you can paste it inside your code immediately.

Select the embed type and get the embed code.

Hosting options

By using the embed code, you can also have full control over the data of your form. For example, to save the collected data to your own back office at once, without it being saved to your Tripetto account.

Self-host the form definition

The form definition is a JSON object containing the structure of your form, including all question blocks, content and logic.

By default, the form definition of embedded forms gets fetched from your Tripetto account. In that way, you're sure your embedded form always uses the latest version of the form definition. Changes you make in the form definition after you've embedded the form are automatically updated inside your embedded form.

By enabling the setting Self-host the form definition, you can detach the form definition from your Tripetto account and include the form definition inside the embed code. When you toggle this setting, you'll see the embed code changing. Keep in mind that changes you make to your form after you've embedded the self-hosted form definition will not be parsed to your form implementation automatically. You'll have to update the JSON object inside your embed code manually.

Self-host collected data

By default, all data you collect with your form, will be stored in your Tripetto account. You can manage your responses inside the studio and export them to CSV.

By enabling the setting Self-host collected data you can prevent the data from being stored in your Tripetto account. When you toggle this setting you'll see the embed code changing. An onFinish event will be inserted inside the embed code. Inside that event you can code the desired processing of your response data.

Processing the response data

The response data is stored inside the variable instance that's parsed inside the onFinish event. We've built in some functions to use the response data:

onFinish: function(instance) {
  // Export to CSV
  var csv = TripettoCollector.Export.CSV(instance);

  // Export to a fieldset
  var fields = TripettoCollector.Export.fields(instance);
}

For more information on self-hosting forms, you can have a look at the docs-website of our SDK. The SDK contains more than just self-hosting forms, but it can help you to understand the concept and used techniques.

Use these helplines if you have any questions, problems or requests