Sharing3 Min.

How to use custom CSS in embedded forms

In your embedded forms you can add custom CSS to overrule the styling for parts of your form.


About custom CSS

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.

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

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

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 forget to include the custom CSS in your embedded form and publish this to your site.


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:

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

    Help us improve