How can I change the colors on my form?

You can change the colors of your form from the Theme & Appearance Configuration Panel.

First tab of menu found at Theme & Appearance Configuration Panel  → Form Experience.

Form Experience

The first tab of the Configuration Panel is called "Form Experience." This gives you a basic overview of your form's style. From here, you can change:

  • BG—The background of all pages of your form, including the success page (shown after submission).
  • Active—Affects buttons, selected answers, and link text, as well as the default color for typed answer text.
  • Text—Sets the default color for all text on the form, except for answers, links, button text, and error messages.
  • Warning—Used for various error messages, like if submission is attempted when a required question isn't answered.
  • Custom 1-4—These can optionally be used to save additional colors to your "color palette," so that you can easily apply them to specific elements on the following pages of the Theme & Appearance Configuration Panel.

Typography

You can fine-tune the styles of different text on your forms from the next tab of the Configuration Panel, "Typography."

Screenshot of the menu found at Theme & Appearance Configuration Panel → Typography.

By default, the font color of each element will match the Text Color set in Form Experience, except for Answers, which will default to the Active Color.

Users on specific pricing plans can also create Custom Styles, which can then be applied to specific text on your form.

UI Elements

The "UI Elements" page gives specific style controls over different elements of the UI.

Theme & Appearance Configuration Panel → UI Elements → Background

You can add a background image or video from the "Background" section, and you can overlay a semi-transparent color to either one if you like.

Users on specific pricing plans also have the ability to change the color of the submit and pagination buttons to something other than the Active Color (this is not supported for forms in One-at-a-time Mode) with Custom CSS

Gotchas

  • The white boxes behind individual questions can't be changed to a different color unless you target them using Custom CSS (Please note that this feature is exclusively available with specific pricing plans.). However, you can remove these boxes completely by going to the Theme & Appearance Configuration Panel → UI Elements → Questions and toggling off "Has background and shadow."