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