How to embed a form from the studio into your website

When to use

Use the embed code of your Tripetto form if you want to show your form inside your own website's content, or if you want to share your form via your own domain. Your collected data is stored under your account at Tripetto in Western Europe.

🧯 Troubleshooting: Update your embeds after May 2023 studio update

With the studio update of May 2023 the studio embed codes are revised. Find out if you have to update your embedded forms:

• Update your embeds after May 2023 studio update

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. It comes with several options and embed types to perfectly match your implementation purpose.

📌 Also see: Looking for data control?

With the studio embed all collected data is stored under your account at Tripetto. It's also possible to take control over your data and store it on your own. In that case choose for integrating your Tripetto form with the Tripetto FormBuilder SDK:

• How to integrate a form from the studio into your website or application

---

How to use

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 and you will see the embed code and some settings.

Embed code

By default you see the most-used configuration for embed codes. If you simply want to embed your form inline with the other content on your website, you can use this default embed code.

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 which is the best type for you.

You can select one of the following embed types:

• Inline with other content (HTML snippet) - The form gets placed inline with your content on the position where you place the Tripetto element (div element with unique id);
• Full page (HTML snippet) - The form covers the whole page. You can place the snippet at the desired position in your code;
• Full page (HTML page) - A full working HTML page with the form covering the whole page;
• Using JavaScript or TypeScript - The form gets embedded using ES6 imports. Make sure you also install the required npm packages (commands also included in the studio).

Options

Inside the Share screen you can customize the embed code to configure some options in the embedded form. You can just toggle the desired options and the embed code will update automatically.

The following options are available:

• Allow pausing and resuming - Option to determine if the form can be paused and resumed by your respondents.

• Save and restore uncompleted forms - Option to determine if data persists in the browser if a respondent visits the form again at a later moment.

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

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

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

Please notice that you can attach your form to any element you'd like inside your page. By default the inline embed code includes a div element with a unique Tripetto id. The element parameter in the embed code attaches the form to that div element, using the unique id. You can control where that div element is shown in your HTML structure and you can style that div via your own stylesheet.

If you choose to embed your form as a full page, the form gets attached to the body element of the page where you place the embed code at. The form then will be shown as a full page form on top of any other content that's on that page.

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">

---

Data storage

By using the studio embed, both the form and collected data are always stored under your account at Tripetto in Western Europe.

Self-hosted

If you want to take full control over your data and store it on your own, the studio embed is not for you. Instead you can integrate the form in your website/application with the Tripetto FormBuilder SDK, which gives you control over your data storage. See this article for more information about integrating with data control.