How to use custom CSS in embedded forms

When to use

Before using custom CSS, please first have a look at the built-in advanced styling options to see if you can achieve your desired styling with that.

If the built-in styling options are not sufficient for your case, you can add custom CSS to parts of your form. That will overrule the built-in styling of your form. Still, Tripetto is not aimed for heavy CSS customization, so not all parts of your Tripetto forms can be customized.

CSS customization is only possible for embedded forms. Forms shared via the shareable link can not contain custom CSS.

🚧 Warning: Disclaimer for using custom CSS

The usage of custom CSS is at own risk. We don't offer support on the usage of custom CSS or forms that include custom CSS. We can't guarantee the working of your custom CSS in future updates of Tripetto.

How to use

Customizing CSS from outside the Tripetto embed is not possible, so you cannot add CSS to your own stylesheet to overrule Tripetto's CSS. You have to make sure the custom CSS for your Tripetto form is done inside the actual embed of your form. See the specific help article about your embed method to see how you can add the custom CSS to your embed.

Develop custom CSS

Custom CSS in Tripetto embeds can only manipulate CSS inside question blocks of your form. Elements in the form that are not part of a question block (like the welcome/closing messages and form footers) are not customizable.

To add custom CSS to a certain question block, you can address that question block by using the data-block selector and referring to the desired block name by its 'package name'. For the full list of package names that you can use as data-block selector, please have a look at this overview of all our packages.

🧯 Troubleshooting: Package names changed with May 2023 update

With the May 2023 update of Tripetto, the package names have changed. It's advised to update your custom CSS implementations. Whereas before all package names started with tripetto-, all package names now start with @tripetto/. For example, up to May 2023 the text block package name was tripetto-block-text, but now is @tripetto/block-text.

Now you can add the custom CSS for that block as a string value. To do so, use the HTML element selector in CSS to address the desired elements inside the referred question block. Don't address elements with the class names, because these are flexible class names which can change overtime.

Add to embedded form

After setting up your custom CSS you can add it to your embedded form.

<div id="tripetto-div-id"></div>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/studio"></script>
<script>
TripettoStudio.form({
    runner: TripettoAutoscroll,
    token: "STUDIO_FORM_TOKEN",
    element: "tripetto-div-id",
    customCSS: "[data-block='@tripetto/block-text'] { YOUR_CUSTOM_CSS }"
});
</script>

Examples

Let us show you some examples of how to use custom CSS in your embedded forms.

Customize one question block

Let's see a reference to add custom CSS to the question type Text (single line). The package name of that question type is @tripetto/block-text (see package). The basic custom CSS code for that will look like this:

[data-block='@tripetto/block-text'] { YOUR CSS }

Now you can add the custom CSS for that block as a string value. To do so, use the HTML element selector in CSS to address the desired element(s) inside that question block. For example to customize the colors of the title and description of the question type Text (single line):

[data-block='@tripetto/block-text'] { h2 { color: blue; } p { color: red; } }

Customize multiple question blocks

As you can see you have to add the custom CSS to each question type apart. So let's say you want to customize elements for the following question types in your form:

• Rating - Package name @tripetto/block-rating (see package);
• Multipe choice - Package name @tripetto/block-multiple-choice (see package);
• Yes/no - Package name @tripetto/block-yes-no (see package).

Your custom CSS code for these question types will look like this:

[data-block='@tripetto/block-rating'] { h2 { color: blue; } p { color: red; } }
[data-block='@tripetto/block-multiple-choice'] { h2 { color: blue; } p { color: red; } }
[data-block='@tripetto/block-yes-no'] { h2 { color: blue; } p { color: red; } }