Most requested CSS styles you can use

Let's see how you can easily change the look of your formaloo. Here are the CSS styles you can add to your formaloos.

Just paste the code into the Custom CSS box in the Design tab of your formaloo editor page.

Change the font size of the fields' title

.formaloo__field-title { font-size: 23px !important; }

Note: The bigger the number (23px), the bigger your text.

Note 2: Don't put space between your number and its unit (px).

Change the font size of the fields' answers

.formaloo__field-input { font-size: 20px !important; }

Change the number of columns in single-step formaloos

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

.formaloo__field-container { max-width: 10%; min-width: 30% !important; }

Note: The first line makes the container wider so you can have multiple columns. You can remove it if you don't need it.

Note 2: In the second line, you can change the value from 10% to 20% or 30% to change the number of visible columns.

Hide the "Previous" button in single-step formaloos with Page break field(s)

div[class^='page-style_page-navigation-wrapper']>div:nth-child(1) {display:none !important;}

Remove the whitespace in multi-page formaloos

.form-theme-background { justify-content: flex-start !important; height: auto !important;}

div[class^='style_form-multiStep-fields-wrapper'] { justify-content: flex-start !important; }

#formz-wrapper #formz-layout-wrapper { min-height: auto !important; }

Remove the whitespace in single-page formaloos

.formaloo__form-container { padding: 5% 10% !important; }

Note: The first number (5%) defines the space from the top & bottom sides of the page (% compared to the whole screen page). The second number (10%) defines the space from the right & left side of the page (% in comparison to the whole screen page).

Note 2: The bigger the number, the more space you'll have.

Note 3: Don't put a space between the number and the % sign.

Remove the up & down buttons in multi-page formaloos

div[class^='style_form-button-wrapper'] {display: none !important;}

Show the fields in 3 columns in single-page formaloos

.formaloo__field-container { min-width: 25% !important; }

Align the options of choice fields in 3 columns

.form-checkbox-input .formz-checkbox-label { width: 30%; }

Don't show the disabled previous/next button from paginated forms

.formaloo__button:disabled {display: none;}

Change the font color of the input text

.formaloo__field-input { color: #000 !important; }

Change the space between the fields

.formaloo__field-container {margin-bottom: 20px !important;}

Change the size of the fields

.formaloo__field-input {height: 40px;}

Remove the space when you embed a form

.form-theme-background, div[class^='style_form-multiStep-page'], div[class^='style_form-welcome-screen'] {height: auto !important; min-height: auto !important;}

Updated on: 20/03/2023