The "Design" tab in Formaloo's form editor offers a variety of options to personalize the appearance and functionality of your forms. Starting from changing the colors, fonts, and field order to different show/hide options.
This article walks you through the full functionality of the "Design" tab in the form editor.
Choose your form type
At the top of the Design tab, you’ll see two options for your form type:
Classic form: All questions appear on one page.
One question at a time: Questions are shown one per page (multi-step).
You can switch between these two at any time based on how you want users to experience your form.
💡 Idea: You can add your cover image and logo directly from the form editor. Just click Upload Cover Image or Upload Logo at the top of the form, then select your file.
Pick a layout
Right below the form type, you’ll find layout options that let you change the visual structure of your form.
Select the arrangement that best matches your brand or use case.
Customize colors (Color palette)
In Color palette, you can change colors for the main parts of your form:
Questions and texts
Answers
Buttons
Button text
Background
You can select colors by clicking on the drop icon and either select colors randomly from the color wheel or put in color codes under #HEX.
This allows you to match colors according to your brand's color palette.
💡 Tip: If you want to change the color of a specific field description, click inside the description text and use the formatting toolbar to update its color. This is helpful for highlighting important instructions under a question without changing your overall theme.
If you'd like to learn in detail about customizing texts, read the article on how to add and customize the text in your form.
Use Theme Gallery (optional)
If you want a faster starting point, use Theme Gallery to apply a ready-made theme. You can still edit colors, fonts, and background after applying a theme.
Choose a font
In Fonts, choose a font from the dropdown. Your selection applies across the entire form, keeping the experience consistent. The default font is Inter, but you can browse the list and pick a style that better matches your brand’s tone and look.
Add a background image
In Background image, upload an image using drag and drop or Choose file.
Then use Background image brightness to make sure your questions and inputs stay readable.
If the background makes the form hard to read, increase brightness or use a simpler image with less detail.
⚠️ Background images should be lightweight. Very large files may load slowly for respondents (especially on mobile). If your image is heavy, resize or compress it before uploading.
Adjust corner roundness
All small details matter, so we also made it possible for you to adjust button corner roundness. You can choose from 3 options. The decision will apply to all buttons in the survey/form.
Use Advanced settings
In the Advanced section, you can control what respondents see and how the form behaves. Some options are available in both form types, and some only appear in One question at a time.
Advanced options can change based on form type, If you switch between Classic form and One question at a time, you may notice that some toggles appear or disappear. That is expected.
Advanced settings in Classic form
When your form type is Classic form, you will typically see:
Show form title: This option helps you hide the form title.
Shuffle fields order: Randomizes the order of fields each time the form loads. This is useful for surveys or quizzes when you want to reduce order bias.
Hide submit button: When this toggle is on, the submit button won’t be shown on the form.
This is useful if:
You want to trigger submission conditionally (e.g., via a script or logic)
You're using a form to only display content without requiring action
Make fields full width: With this toggle on, your form fields will expand to the full width of the form container, ideal for modern, minimal layouts or mobile-friendly designs.
Shuffle field choices (randomizes the order of options each time the form is loaded): Enabling this shuffles the choices within multi-choice and single-choice fields, it adds variety and prevents answer pattern recognition.
Extra options in One question at a time
When you choose One question at a time, you may also see:
Show welcome page: You can choose to show or hide the title and description on the first page, when disabled, the form jumps directly to the first question.
Show form progress bar: Shows a progress indicator as respondents move through the form step by step, so they know how far they are from finishing.
These options help guide respondents through a step-by-step flow and make longer forms feel easier to complete.
⭐️ Tip: If your form is set to One question at a time, you can choose whether to show the welcome page. This is the first screen respondents see, and it can display your form’s title and description before they start answering.
In Classic form, the main option is Show form title, which lets you hide the default title shown at the top of the form. Many teams use this to keep an internal name for the form, while showing a custom title inside the form using Description or Content field instead.
Add custom CSS (optional)
In Custom code, you can add Custom CSS to style the form beyond the Design settings.
ℹ️ I We have added the default and most used CSS selectors for you to add your styles.
If you aren't familiar with CSS, read the article about the frequently used CSS changes in this collection or contact our support team on the website chat.
🔗 Learn more: Most requested form's custom CSS