Using the custom CSS and custom JS features, you can customize the look of your form and also add your Google Analytics tags to your form’s webpage.

Important note for better performanceIt’s important to note that although the Custom CSS is great, it’s best practice to change the look of your forms using the “Design” tab of your form as much as possible. Use the custom CSS only when you can’t make the style changes from the options Formaloo gives you in the “Design” tab.

Add a custom CSS to customize the look of your formTo start, edit your form and click on the “Design” tab. At the bottom, open the “Custom CSS” option. There you can add style to the pre-made classes we’ve added for you.

If you aren’t familiar with CSSHere’s a quick guide to get you started. Each CSS has a selector part and a style part. The selector part defines which element in the form you want to edit. And the style part defines what style you’re giving that selector.

For example, in the following CSS, the .formaloo__form-title is the selector, and the color: blue; is the style.

.formaloo__form-title { color: blue; }Make sure you add a ; separator after the style otherwise the browser won’t be able to read your CSS styling.

If your style isn’t working, it means another style is overriding yours. You can use a !important sign after your style and before the ; to prioritize your style.

Although, it’s very important to avoid adding the !important sign except it’s really important. Otherwise, you might end up stuck with a mixed styling that doesn’t work for some elements.

1. Find the selector that you want to style

We’ve prepared the most used selectors for you inside the “Custom CSS” box. Let’s see what each of them refers to.

.formaloo__form-container refers to the whole container of the form
.formaloo__form-title refers to the form’s title
.formaloo__form-logo is the logo or image at the top of the form
.formaloo__form-description is the form’s description
.formaloo__field-container refers to the container box for each and all of the fields in the form
.formaloo__field-title refers to the title of the fields.formaloo__field-description is the description of each field
.formaloo__field-input is the input fields (short text fields especially)
.formaloo__field-section refers to each and all of the “Section” fields
.formaloo__field-video refers to each and all of the “Video” fields
.formaloo__button is every button in the form, including, but not limited to the “Start”, “Continue”, and “Submit” buttons
.formaloo__submit-button refers to the submit button specifically
.formaloo__navigation-button is the navigation buttons in the “Single page” forms that have page breaks.formaloo__timer refers to the timer box shown in the form
.formaloo__timer-times-up is the “Time’s up” message that shows up when the timer runs out

2. Add the style to the selector

We’ve built a cheat sheet tool with Formaloo so you can find the CSS style you want to add to your selector. Check it out here and go through the different possibilities.

Find your style here

Some useful CSS to copy-paste

We’ve listed the bit more advanced, yet useful, styles you can add to your forms. It’s easy to follow. All you should do is copy the text and paste it at the end of the “Custom CSS” option in your form editor’s “Design” tab.

Reduce the width of the whole form in Multi-step forms

.form-theme-background {padding: 30px 30%;}
@media screen and (max-width: 768px) {
 .form-theme-background {padding: 50px 3%;}
}

Decrease the width of the form in Single-step forms

.formaloo__form-container {padding: 30px 37% !important;}

Show each single choice option in 1 line in Single-step forms

If you want to show each of your choice options in 1 line, this is for you. Also for two or three choices per line, you can change the percentage to 50%, 33%, and 25% based on the length of your choices.

.formz-radio:not(.formz-nps) {width: 100%; display: inherit;}

Reduce the margin of the form in Single-step forms

This is mostly used for embedded forms when you want less marginal space around your form.

.formaloo__form-container { padding: 30px 3% !important; }Make the form’s direction RTL:.formaloo__form-container { direction: rtl; text-align: right; }If you’re familiar with CSSYou can also find more classes from the form inspector. Although it’s very important to note that you shouldn’t add style based on the classes that have a random id at their end. For example, in the following photo, the class name fields-global_form-input-field__2H7Dp can’t be used for styling. Because it’s an auto-generated class name by React that will change with every build from Formaloo.

Add a custom JS

You can now add your Google Analytics, TagManager, Hotjar, and other inspector tools to your form.

All you have to do is to copy the code your tool provides and paste it into the “Custom JS” box on your form. To find the “Custom JS” box, edit your form and click on the “Settings” tab. At the bottom of the settings options, you’ll find it.

The script you paste in this box will be added into the <HEAD> of your form’s webpage.

The body part of the tag manager doesn’t have any effect on how it works. You can either paste it in the script section of your formaloo editor or even ignore it. Then test and preview your tag in the tag manager to make sure it works properly.

Useful templates

As always, we’ve prepared ready-to-customize templates for you. The Custom Style category of templates is dedicated to the template formaloos stylized using Custom CSS. You can pick them, go through their CSS and customize them as you wish.

Final notes

Although the custom CSS features are very exciting to customize the look of your form, remember Formaloo has some customization features you can use to change how your form looks. It’s best practice to start changing the style using those options and use custom CSS only when there’s no premade option for that.

Subscribe to our blog posts to learn about every new feature we add to Formaloo.