Video tutorial about embedding from the studio.
Sharing3 Min.1 Min.

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 taking control over your data here).


Get 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.

Screenshot of embedding in Tripetto
Choose for embedding your form.

Embed types

We provide multiple embed types that affect how the embed code is formatted. It depends on how you want to embed your form in your website/app which is the best type for you.

You can select one of the following embed types:

  • HTMLSnippet (inline with other content) - The form gets placed inline on the position you place the embed code in your code;
  • HTMLSnippet (whole page) - The form covers the whole page. You can place the snippet at the desired position in your code;
  • HTMLPage - A full working page example with the form covering the whole page;
  • Embed in applicationJavaScript (ES6) / TypeScript - 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);
  • Go commandoTripetto Form Kit - Build your own form runner, 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.
Screenshot of embedding in Tripetto
Select the embed type.

Options

Inside the Share screen you can customize the embed code to determine the implementation of the form into your website or application. You can just toggle the desired options and the embed code will update automatically.

The following options are available:

  • Self-host the form definition

    Setting to not get the structure of the form from the studio at tripetto.app, but right from your embed code;
  • Self-host collected data

    Setting to not save the form responses in the studio at tripetto.app, but send the form responses to an endpoint you develop on your own.
  • Allow pausing and resuming

    Setting to determine if the form can be paused and resumed by your respondents.
  • Save and restore uncompleted forms

    Setting to determine if data persists in the browser if a user enters the form later on again;
Screenshot of embedding in Tripetto
Toggle the embed options.

Please have a look at this specific article for more information about full data control from your embedded forms.

CDN

If you embed the form via HTML (see Embed types), the embed code uses some Tripetto scripts that are loaded from a content delivery network (CDN). Tripetto lets you choose which CDN you want to use for your embed. This will not affect the working of your form, but there can be performance and reliability differences between CDN's.

You can select one of the following CDN's:

  • jsDelivr (website);
  • unpkg (website);
  • Custom domain/CDN - Make sure you host the Tripetto scripts on the desired domain and update the script src's in the embed code to point to the right domain and location of the scripts.
Screenshot of embedding in Tripetto
Select the content delivery network (CDN).

Embed code

When you have composed the right embed code, you can copy the embed code to your clipboard to use it in your website or application.

Screenshot of embedding in Tripetto
Your embed code.

Use the embed code

Now that you've got your embed code, you can simply paste that in the right position in your code of your website or application.

Attach your form

Please notice you can attach your form to any element you'd like inside your page. Most of our embed codes attach the form to the body of the page, but you can control the element parameter inside the embed code. You can use that parameter to attach your form to any desired element.

Use the embed type Snippet (inline with other content) to easily attach the form to an HTML element (that element is already in the snippet).

Responsiveness

Tripetto forms are of course designed to work properly on all screen sizes. This is called 'responsiveness'.

If you embed a Tripetto form in your own page, the responsiveness of the form will depend on the responsiveness settings of your own page. In most cases that is controlled by the viewport settings in the head section of your website. We advise to configure that like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Custom CSS

It's even possible to add custom CSS to parts of your embedded form. Please first have a look at the built-in advanced styling options to see if that's sufficient for your styling purposes.

Disclaimer for using custom CSS

The usage of custom CSS is totally at own risk. We don't offer support on the usage of custom CSS or forms that include custom CSS.

Custom CSS can only manipulate CSS inside question blocks of your form, using the customCSS parameter inside your embed code. You can address a certain block by using the data-block selector and referring to the desired block name. You can then add the custom CSS for that block as a string value.

For example, if you want to manipulate the color of the title of the text input blocks (referred to by tripetto-block-text), add this to your embed code:

customCSS: "[data-block='tripetto-block-text'] { h2 { color: blue; } }"

List of block names

For the full list of block names that you can use as data-block selector, please have a look at this overview of all our packages.


Data control in the studio

By using the embed code, you can have full control over the data of your form. That way you can for example use the benefits of the Tripetto platform, but save the collected data only to your own back office, without it ever being saved to the Tripetto infrastructure. This can be very important with regards to privacy legislation, like GDPR.

In this article

    Help us improve