Skip to main content
Design the look of your form

Design your perfect form! Customize colors & backgrounds, layout, fonts & more. Explore more options with CSS.

Updated over 2 months ago

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.

Switch form type: classic form/one question at a time

The "classic form" option displays all questions on one page. For "one question at a time", questions are displayed on different pages. You can switch between these two on the "Design" tab of your formaloo editor.

Switch form type: classic form/one question at a time

🗄️ Old dashboard:

Switch form type: classic form/one question at a time - old dashboard

Shuffle fields order the order of choices

The "Shuffle fields order" option shuffles the order of fields. It's a great way to avoid biased responses in surveys or prevent cheating in quizzes and online exams.

As for "Shuffle the order of choices on fields" - it's self-explanatory, this option will shuffle the order of choices on fields that have choice options. For example, all single-choice and multi-choice fields on your form will have shuffled options every time a user opens the form.

Shuffle fields order the order of choices

🗄️ Old dashboard:

Shuffle fields order the order of choices - old dashboard

Show/hide the form's title

This option helps you hide the form title. You can use it to name the form internally and instead use the Description box to insert a title visible to your audience.

Show/hide the form's title

⭐️ Pro tip:

For forms/surveys that are "one question at a time" (questions displayed on different pages), you have the option to show/hide the form title & description on the first page.

show/hide the form title & description on the first page

🗄️ Old dashboard:

show/hide the form title & description on form - old dashboard

Change the colors on your form

From the Design tab, you can change the text color, field color, button's text and background color, and the background color of the entire survey/form.

Change the colors on your form

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.

If you don't want to choose colors on your own, you also have the option to choose from our default themes.

default themes

🗄️ Old dashboard:

Design - old dashboard

Change the background image

You can change the background image of your form "Upload background image". You can either drag&drop your image or choose it from your device.

You also have an option to adjust the background image brightness after choosing the image.

Change the background image

⭐️ Pro tip:

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.

adjust button corner roundness

Add logo and cover picture

You can add the desired logo and cover picture directly from the first page by clicking on upload logo and upload cover picture.

Add logo and cover picture

🗄️ Old dashboard:

For the old dashboard, once you upload the background picture, you can decide whether it stays on a full screen or will be a cover.

Change the text's font

You can personalize the text written in the description, buttons, and the end page. You can choose different fonts, font sizes and styles, text and background colors, alignment and insert options.

To do this, just select the text and the formatting options will show up automatically.

Change the text's font

📝 Additional insights:

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.

Custom CSS

The custom CSS box lets you add much more customization to how your form looks. We have added the default and most used CSS selectors for you to add your styles.

Learn more about the custom CSS in Formaloo forms here.

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.

Did this answer your question?