Let's see how you can easily change the look of your forms using Formaloo's Custom CSS feature.
Just paste the code into the Custom CSS box in the Design tab of your formaloo editor page.
Fields' titles font size
Paste this into your form's Custom CSS box to change the font size of your fields' titles.
.formaloo__field label span { font-size: 20px; }
Notes
✐ The bigger the number ('23px' vs '20px'), the bigger your text. Don't put a space between your number and its unit (e.g., px).
✐ To change the title color of the fields, use the color settings available in the Design tab of your form editor.
Input fields' answers font size
Paste the following line into your form's Custom CSS box to change the font size of your fields' values (applicable input fields like text, number, long text, email, phone number, date, city, dropdown's selected text, etc.).
.formaloo__field .MuiFormControl-root .MuiInputBase-root input { font-size: 20px; }This changes the font size of the answers your user types in your input fields.
Input field answers' text color
Paste the following line into your form's Custom CSS box to change the font size of your fields' values (applicable input fields like text, number, long text, email, phone number, date, city, dropdown's selected text, etc.).
.formaloo__field .MuiFormControl-root .MuiInputBase-root input { color: #555f6d; }
Note
✐ To change the title color of the fields, use the color settings available in the Design tab of your form editor.
Choice fields' options font size
Paste the following line into your form's Custom CSS box to change the font size of your choice fields' values (applicable choice fields like 'single choice', 'multi-choice', and 'terms & conditions').
.formaloo__field .MuiButton-root p { font-size: 20px; }
Choice fields' options text color
Paste the following line into your form's Custom CSS box to change the text color of your choice fields' values (applicable choice fields like 'single choice', 'multi-choice', and 'terms & conditions').
.formaloo__field .MuiButton-root p { color: #555f6d; }
Choice field options' background color
Paste the following line into your form's Custom CSS box to change the font size of your fields' values (applicable input fields like text, number, long text, email, phone number, date, city, dropdown's selected text, etc.).
.formaloo__field .MuiButton-root, .formaloo__field .MuiButton-root.MuiButton-outlined { background-color: #c613701c; }
Single choice fields' selector color
Paste the following line into your form's Custom CSS box to change the color of your single-choice fields' selector (radio button) color.
.formaloo__field .MuiButton-root .MuiButton-icon svg { fill: #b63030; }
Multi-choice fields' selector color
Paste the following line into your form's Custom CSS box to change the color of your multi-choice fields' selector (radio button) color (applicable to 'multi-choice', 'terms & conditions', and NPS score field types).
.formaloo__field .MuiButton-root .MuiCheckbox-root div { border-color: #b63030; }
.formaloo__field .MuiButton-root .MuiCheckbox-root.Mui-checked div {background-color: #b63030;}
Change the number of columns
Paste the following lines into your form's Custom CSS box to show your form's fields in two or three columns.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div { width: 47%; min-width: 47%; }
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div.formaloo__form-description { width: 100%; }
Notes
✐ You can also adjust the width percentage to change the number of visible columns. For example, a 30% width and min-width would display the fields in three columns. To make your form's layout look its best, reorder the fields in a way that aligns them well together on the form.
✐ Make sure to change both width and min-width when adjusting the columns on your form.
✐ To have the long text field take up the whole width of the form (check the screenshots above), add the following CSS after the code to change your form's columns.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div.formaloo__field--long_text { width: 100%; }
.formaloo__field--long_text .MuiFormControl-root { max-width: 100%; }
File upload field full-width
Paste the following lines into your form's Custom CSS box to show your form's File Upload fields with full width.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root>div.formaloo__field--file {width: 100%;}
.formaloo__field--file label.MuiBox-root { max-width: 100%; }
Note
✐ Be sure to check your form's layout settings, as well as the cover image and background image combination, to create beautiful forms that perfectly match your brand.
Align your form's title text
Paste the following lines into your form's Custom CSS box to align your form's title text to the left.
.formaloo__form-title {text-align: left !important;}
form>.MuiBox-root>.MuiBox-root>.MuiBox-root {align-items: revert;}
Note
✐ To change the alignment of your form's description text, in the form editor, select the description text and from the toolbar, change its alignment.
Change the space between the cover image & form title
Paste the following lines into your form's Custom CSS box to change the space between the cover image & form title.
form>.MuiBox-root>.MuiBox-root>.MuiBox-root img.MuiBox-root {margin-bottom: 32px;}
Long text field's height
Paste the following lines into your form's Custom CSS box to increase the height of your form's long text fields.
textarea {height: 300px !important;}
Note
✐ In the above code, you can use other values, such as 'right' and 'center', to further adjust the alignment.
Is your style more complicated or not on this page?
No worries, our certified partners are always here to help! They will create your project with your specifications from 0 to 100 and deliver it to your workspace.
We have a pool of certified partners who can take care of your form's customizations from start to finish, tailored to your specs and delivered straight to your workspace, so you can skip the setup and launch faster 🚀
Tell us about your use case and requirements 🔗 on this form – we’ll match you with the right partner, and get back to you shortly with a time and cost estimate.