Data management4 Min.

How to take control over your data from the studio

Data control is important to us (and hopefully to you too). With Tripetto you can take full control over your data, so no data will be stored at our end. It's up to you!

The importance of data control

We wrote about the importance of data control earlier in our blog. That blog article mainly focusses on our Developer Kit which you can use to fully integrate all Tripetto components.

But also when you're using our studio, you can take advantage of Tripetto's unique data control options. In that way you can manage and build your forms in the studio, but as soon as something has to be done with data, you can overrule the studio.

Let's assume you've created a form in the form builder at and you're now ready to share it with your audience. But in this case you don't want any data to be stored at Tripetto and take control over that data.

Embed the form

You can only take control over your data when you embed the form into your own website/project. To do so we start by setting the share method to embed. 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. At this point all data will still be stored at Tripetto's endpoints.

Screenshot of embedding in Tripetto
Choose for embedding your form.

Now take over your data

Screenshot of hosting options in Tripetto
Take control over the hosting options.

At the moment you select to embed the form, a few extra options pop up regarding Hosting options. Over there you can choose what data you'd like to cut loose from the Tripetto infrastructure. We'll cover all options one by one down here.

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, but also your styling and label translations.

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 your 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 onSubmit event will be inserted inside the embed code. Inside that event you can code the desired processing of your response data.

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

onSubmit: function(instance) {
  // TODO: Handle the results
  // For example retrieve the results as a CSV-file:
  var csv = TripettoRunner.Export.CSV(instance);

  // Or retrieve the individual fields:
  var fields = TripettoRunner.Export.fields(instance);

  // Or retrieve the NVPs:
  var NVPs = TripettoRunner.Export.NVPs(instance);

Add custom data actions

To help you perform custom actions after the form submission, you can use the onComplete event in the embed code. Inside that event you can code the desired custom actions after form completion, for example to send data to Google Analytics.

The response data is stored inside the variable instance that's parsed inside the onComplete event. The onComplete event also parses the server id of the submission.

onComplete: function(instance, id) {
  // TODO: Code the custom actions
  // For example log the server id:
  console.log("This submission is saved with id: " + id);

  // Or retrieve the NVPs to use the response data:
  var NVPs = TripettoRunner.Export.NVPs(instance);

Allow pausing and resuming

Tripetto forms have a built in pause and resume functionality, as you can read over here. You can also use this functionality when you embed your form, by simply enabling the setting Allow pausing and resuming. The embed code will update.

It depends on how you host your collected data (see paragraph 'Self-host collected data' up here) what to do next to make this work:

  • In case collected data is stored at Tripetto: This way you can just sail along with the default process of Tripetto's pause and resume functionality in shareable links. Please be aware that your respondents receive a resume link to the shareable link at, so not to your embedded form;
  • In case collected data is self-hosted: As Tripetto cannot access the data in the form, you have to process the pause and resume requests yourself with the following functions in the embed code:
snapshot: undefined /* Feed snapshot data here */,
onPause: function(snapshot) {
  // TODO: Store the snapshot data somewhere

Save and restore uncompleted forms

Another option to help your respondents take off where they stopped the form is the save and restore functionality, as you can read over here. When you toggle the setting Save and restore uncompleted forms, you'll see the embed code changing.

If enabled, this option will save a snapshot of the uncompleted form in the local storage of the browser of the respondent. This is especially handy when you've embedded your form on multiple pages within your site, so people can browse through your website and continue with the form where they left off.

More information

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.

In this article

    Help us improve