All Collections
Build & customize
Custom CSS on forms
How to add a custom CSS code to the form
How to add a custom CSS code to the form

Custom css code: where to add them and what are the selectors?

Updated over a week ago

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.

custom css box

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.

Did this answer your question?