Most requested form custom CSS styles

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.
Don't put space between your number and its unit (px).

Change the font size of the fields' answers (input text)

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

This changes the font size of the answers your user types in your fields.

Change the font color of the input text

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

Change the number of columns in single-step forms

.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.
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 forms when you embed the form

.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 space when you embed a multi-step form

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

Change the text height in the long text fields

textarea {height: 300px !important;}

Remove the whitespace in single-page forms

.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).
The bigger the number, the more space you'll have.
Don't put a space between the number and the % sign.

Hide the submit button

.formaloo__submit-button{display: none !important;}

[Classic view] Remove the up & down buttons in multi-page forms

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

[Classic view] Align the options of choice fields in 3 columns

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

[Modern view] Align the options of choice fields in 3 columns

.form-checkbox-input .formz-text-checkbox-label { width: calc(28% - 20px); }

Hide the disabled previous/next button from paginated forms

.formaloo__button:disabled {display: none;}

Change the space between the fields

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

Change the size of the fields

.formaloo__field-input {height: 40px;}

[Classic view] Change the color of the selection boxes in the multi-choice questions

.formz-label__check { background-color: #794EF1 !important; border-color: #794EF1 !important; }

[Modern view] Change the color of the selection boxes in the multi-choice questions

.m-formz-label__check {color: #00adff !important; background-color: #00adff !important;}