Themes customize how a template will look when sent as a form to respondents. This allows you to visually differentiate between different templates and add template-specific branding that respondents will see.
You can navigate to the Theme Management area by clicking Settings -> Themes via the left-side menu.
In this area, you can search your themes by name, add a new theme, and see all your existing themes. At a glance, you can see the favicon, theme name, and the primary and accent colours for light and dark modes for each theme.
Adding a New Theme
Clicking on the "Add New Theme" button next to the search bar will allow you to create and customize a new theme.
The following things can be set in a theme:
Favicon: The favicon appears before the template title in the respondent's browser tab when they visit the form. We recommend setting this to be a square aspect ratio (1:1). Make sure it doesn't contain any tiny text; simple symbols work best. Also, try to make sure the favicon will work well in light and dark mode. If the icon/symbol is black, give it a white outline, and vice versa. Colored icons/symbols work best.
Theme Name: Set the name of the theme. Try to keep the title clear and concise.
Font Style: Here you can select any Google Font for your theme. You can start typing to search for a specific font. When a font is selected, a preview is shown right below the dropdown to show you how that font style will look. To find a font you prefer, go to An external link was removed to protect your privacy. and search for the name in the dropdown menu.
Styling
Below the general settings, you will see a block that allows you to customize the theme for Light and Dark Mode. The form will be displayed in whatever mode the respondee's browser is set (default tends to be light mode). For both Light and Dark Mode, the following can be customized:
Background Colour: The background colour can be set to cool, neutral, or warm to help this fit into your other colours more smoothly.
Primary Colour: Click on the coloured block to use a colour picker to select your primary colour, or use the text box next to it to type in the HEX code for your primary colour. You can also select whether text on the primary colour is white or black. We advise using a contrast checker to make sure text is readable. Use
#FFFFFFfor white text and#000000for black text.Accent Colour: Similar to the primary colour, click on the colored block to use a colour picker to select your accent colour, or use the text box next to it to type in the HEX code for your accent colour.
Logo: You can also upload a logo. We recommend using a PNG with a transparent background. This will be visible in the top left of the form when the template has been sent as a form.
Below the styling settings, you can see a preview of the theme, including all the changes you have made in the settings above. Use the toggle with a sun on the right to switch between light and dark mode. It is helpful to refer to this preview screen while customizing your theme to ensure elements appear as expected and text remains legible.
At the bottom of the Add Theme Panel, you can save or cancel the creation of the theme. You can also delete the theme with the bin button on the top right.
Clicking on an existing theme will allow you to view and edit the theme in the exact same way as when you created it.
Read more about creating templates to understand how to use your themes here.