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 yesterday

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 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).

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

You can switch between these two at any time based on how you want users to experience your form.

Choose your form 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.

Depending on the form type you select, you’ll see different design toggles appear.

If you select Classic form, you’ll see options to:

  • Show/hide form title

  • Shuffle fields or choices

  • Hide the submit button

  • Make form fields full width

classic form

If you select One question at a time, you’ll have:

  • Toggle to show/hide form title & description on first page

  • Toggle the progress bar display

  • Shuffle options

  • Submit button

  • Field width options

multi step form

Show form title & description on first page

You can choose to show or hide the title on the first page.

When disabled, the form jumps directly to the first question.

⭐️ Note:

If your form is set to "One question at a time", you can choose to show or hide the title and description on the first page.

In the classic forms, this toggle allows you to hide the default form title (the one displayed at the top of the page).

Many use this to name the form internally while customizing the visible title in a Description field instead.

Shuffle fields order

This option shuffles the order of the questions on your form. It’s great for surveys and quizzes where randomized order helps reduce bias or prevents cheating.

Each time someone opens the form, the field order will change.

Shuffle the order of choices on fields

Enabling this shuffles the choices within multi-choice and single-choice fields.

Like the previous option, it adds variety and prevents answer pattern recognition.

Shuffle fields order the order of choices

Show or 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

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.

Change the form font with Google fonts

To personalize the feel of your form even more, you can now change the font using Google fonts directly from the Design tab.

  • Under the Form font dropdown, you’ll find a full list of available fonts.

  • The default font is Inter, but you can scroll through and choose any style that better matches your brand, tone, or aesthetic.

  • Simply click to apply the font, and your entire form will be updated instantly.

google fonts

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

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

Change the 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.

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

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.

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?