Video tutorial about embedding from the studio.
Sharing4 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).


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.

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:

Screenshot of embedding in Tripetto
Toggle the embed options.

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

In this article

    Help us improve