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

Let's first have a look at the available embed types, before we explain the more advanced hosting options.

Embed types

We provide multiple embed codes to let your easily embed the form the way you want. You can select the desired method by selecting one of the following options in the Embed type dropdown:

  • Select HTML Snippet (inline with other content) - The form gets placed inline on the position you place the embed code in your code;
  • Select HTML Snippet (whole page) - The form covers the whole page. You can place the snippet at the desired position in your code;
  • Select HTML Page - A full working page example with the form covering the whole page;
  • Select Embed in application JavaScript (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);
  • Select Go commando Tripetto 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 and get the embed code.

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

That's it!

In most cases, this is it! After you've selected the right embed type, you can copy the whole embed code to your clipboard so you can paste it inside your code immediately.

Hosting options

By using the embed code, you can also 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.

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

Custom CSS options

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; } }"
In this article

    Help us improve