Theme & Appearance Overview

Your form must contain at least one question to reveal the Theme & Appearance button.

You can access the form's Theme & Appearance Editor by selecting the "Theme & Appearance" button above the left question panel.

The Theme & Appearance Editor consists of the settings panel on the left, containing all the available controls, and the Preview window, from which you can view your changes in real-time.

The settings panel is broken down into the following sections:

• Global Settings
• Typography
• UI Elements
• Custom CSS
• Translations

Each of these are covered below.

When you open the Theme & Appearance Editor, these settings are always visible and give you quick access to commonly used defaults. It is here that you can set the "Form Experience", configure default fonts and colors, and more.

Upon accessing the Theme & Appearance Configuration Panel, a device preview menu will be displayed where you can preview how the form will look on various devices, including tablets, phones, and desktop browsers.

A pagination navigation menu will be displayed, allowing you to quickly skip through the pages of your form without needing to answer questions.

If you're working on a multi-page form and want to get a preview of how it will look before publishing, we've got you covered!

There are two helpful options (located next to the viewport preferences) that let you quickly review your form:

• Disable Required Fields
• Generate Answers

These options make it easy to experience the form just like a user would, without needing to fill out every detail manually.

This option lets you quickly breeze through the form by making all the questions optional. It’s perfect for previewing multiple pages without having to fill out every required field.

If you’d like to turn them back on, just click the menu button and select Enable Required Fields.

This option automatically fills in example answers for most field types, giving you a quick preview of how the form will look once it's completed. It’s a great way to see the form in action without having to fill everything in manually.

Form Experience

The "Form Experience" buttons allow you to choose between a classic form experience or a one-question-at-a-time "guided" experience. Learn more about the "Guided Mode" experience.

Colors

Use the color pickers to select default colors for different parts of your form. Learn more about what each color targets.

Fonts

Primary and Secondary Fonts can be set for your entire form. For finer control, use the Typography settings.

Question Settings

Decide whether or not to show the white background behind each question, or whether to show an asterisk for required questions.

Import Theme

On specific pricing plans, you can import a theme from your other forms.

Typography gives you control over the font, size, line heights, and coloring of the text on your form. It is here that you can configure the style for each text element.

Custom Style

On specific pricing plans, you can add a custom font style and apply it to the text on your form.

To create a new style and apply it to the form:

1. Click "Add Custom Style +" to create a new style group.
2. Click on the right-most icon to configure the style.
3. Go back to the form editor and highlight your desired text. On the formatting bar, click the right-most down arrow and select your Custom Style.

We support all Google Fonts on all plans, and you can use other fonts on your forms with Custom CSS (a feature reserved for specific pricing plans).

In this section, you can customize your form's background. You can choose a background color, upload a background image, or embed a background video. Learn more about what video sources are supported.

Using the Overlay settings, you can also add a blur or a translucent overlay color over the background image or video.

This section controls how your question fields appear on your form. These options are also displayed in the Global Settings section for quick access.

• "Has background and shadow" controls the white background around question fields.
• "Required questions are indicated with an asterisk (*)" controls whether an asterisk is included at the end of any required question.

You can change the wording and styling of the submit button in this section.

The Submit Button section contains the ability to;

• Change the text of the Submit Button.
• Change the color of the Submit Button.
• Toggle the “X questions to go” messaging.
• Toggle the total price from being displayed in the submit button.

On specific pricing plans, you can also customize its typography settings and button shape.

The styling options for pagination buttons differ based on the chosen "Form Experience".

Classic form

• Buttons Only — This option displays a simple arrow button to move between pages.

  

• Buttons Only (with Total Price) — This option is similar to buttons only, except the total price of your form will be displayed alongside the arrow.

  

  You can enable this button style by toggling on "Shows total price in the next page button."

• Numbers — This option displays a row of numbers between standard arrow pagination buttons to navigate between pages.

  

• Progress Bar — This option will display a progress bar between the two standard pagination buttons on your form.

  

One-at-a-time

When "One-at-a-time" is selected, the pagination buttons work slightly differently. This is what it looks like when all settings below are toggled on:

The following toggles can be set:

• Include a back button — This will allow a respondent to return to previous pages.
• Include progress bar — This will include a progress bar across the top of the screen.
• Include page numbers — This will display the total number of pages and current page number at the top right of the form window.

Generate answers won’t fill in Country, Appointment, Slider, Image Upload, and File Upload, or Embed fields