Let's see how you can change the look on your formaloo more easily. 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.

Note2: 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 didn't need it.

Note2: 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 (% in comparison 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).

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

Note3: Don't put space between the number and the % sign.

Remove the up & down buttons in multi-page formaloos

div[class^='style_form-multi-step-buttons'] {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%; }

Did this answer your question?