How to embed a form from the studio into your website

About embed codes

Tripetto offers an embed code for each form you create in the studio. With that embed code you can implement your Tripetto form in your own website and/or application. It comes with several options and embed types to perfectly match your implementation purpose.

Compose Tripetto's 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.

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.

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. Please have a look at this article for more information about full data control from your embedded forms.

• 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. Please have a look at this article for more information about full data control from your embedded forms.

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

• Custom CSS

  It's also possible to add custom CSS to parts of your embedded Tripetto form. To do this, manually add the customCSS property to your embed code and add the desired custom CSS code to that: customCSS: "YOUR CSS". Please have a look at this article for instructions how to use custom CSS in 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.

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.

---

Use Tripetto's 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">

---

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.