Create a theme for your form

By default, all of your OpenForms are presented using a clean, easy-to-read base theme that is fully WCAG 2.1 compliant. This means your forms should be accessible to a broad range of respondents.

 
You can build on our base theme to customize the appearance of your forms.

Use basic styling options to change items like the primary and secondary colors, font, logo and banner appearance. 
 
Or, go further with advanced styling options to add CSS in our theme editor or link to an external stylesheet. Advanced styling options let you align forms with your organization's branding or website more closely.  

Before you begin

Before you create a theme, it's worth noting that from time to time we may update our base theme to bring you new features or styling options.

These updates can sometimes clash with advanced styling like the code in your custom CSS or external stylesheets. We'll give you plenty of notice before we make any updates and let you know what you need to inspect and update.

Here's everything you need to know about base theme updates.

Design a theme

Only admins can design new themes. If you’re not an admin, you can still change the theme of a form to an existing theme.

To create a theme, go to Admin > Themes from the main menu. On this screen, you can see all of your existing themes and whether they’re in use on any forms.

On the Themes page, choose Create theme to open the theme editor and start from scratch. Follow these steps to design your theme: 

1. Name your theme at the top of the page.

2. Give it a Theme description to explain what kinds of forms you want to use this theme on (for example ‘use this theme for fun forms only’). This is particularly important if you have other users managing your forms.

3. Select a Font from the dropdown.

4. Set your theme’s Primary color, Secondary color and Destructive color by either typing Hex codes into the text boxes, or choosing them from the pop-up color pickers.
   Make sure you use accessible colors on your theme so everybody can use your form. Check if your colors are accessible here: http://accessible-colors.com/

5.  If you want, upload a file to use as your logo.
   Can't see the logo option? Save your theme, and this option will appear. Use a logo with a minimum size of 80x80 px for the best results.
   

6. If you've uploaded a theme logo, select the logo and title layout. This will be applied to your form, and to response PDFs.
   If you've uploaded a white logo, select Primary theme color background behind form name and logo, otherwise your logo will appear invisible.

7. Choose where to display error messages on your form from the Error message display position menu.

8. To fine-tune your form theme, you can link to an external CSS stylesheet (this URL must be https://), or manually add your own code to the Custom CSS styling field. These fields are useful for developers, but aren't necessary if you’re just making a simple theme. See Use CSS to fine-tune your themes for more information.
   Before you add advanced styling to your theme, read more about customizing our base theme. 

9. Save your changes.

Add a theme to a form

1. From the main menu, go to Forms > any form > Settings > Display settings > Choose form theme.

2. Choose a theme for the form.
   

   

3. Save your form.

Themes must be applied to forms individually (we don't currently support batch applying themes).

See where your themes are used

Select your theme from the Themes screen, or edit it, to see just how many forms are using that theme. 

Select See all for a full list of the forms using your theme.

Edit a theme

Only admins can edit themes.

You can update themes at any time by returning to the Theme screen.

1. Go to Admin > Themes.
2. Click the theme you'd like to edit to go to the theme editor.
3. Alternatively, Click the '...' menu for a theme and select Edit.

Duplicate a theme

Only admins can duplicate themes. 

If you'd like to make a new theme based on one you've already created, or test out a new base theme update, you can duplicate a theme. 

1. Go to Admin > Themes.
2. Select Duplicate from the '...' menu in the theme you'd like to duplicate.
   
3. Alternatively, if you're in the theme editor, select Duplicate theme from the '...' menu at the bottom of the screen.

Update your base theme version 

Here's how it works

If we've updated our base theme and there's a chance this may affect the styling of your themes, we'll let you know with a general warning message in the Themes screen, and a pip next to each potentially affected theme.

We'll also let you know in the theme editor.

What you need to do

If we've flagged your themes as potentially affected by an update, check our base theme release notes to see which parts of your themes may clash with the update.

If the elements we've described don't apply to your theme

You can safely update its base theme version. Do this any one of the following three ways:

1. Select Update to base theme from the '...' menu in the Themes screen.
   

2. Open your theme, toggle the Update base theme switch at the top of the screen, then Save your theme.

   

3. Do nothing. We'll automatically update your themes to the current base theme version the next time we release an OpenForms update.

If the elements we've described do apply to your theme

You'll need to update those elements so they don't impact your form styling. 

1. Update the necessary elements, as described in our base theme changelog. 
   It's a good idea to trial any updates on a duplicate theme before updating your base theme version.
2. Update the base theme version, as described above.

What's next

Now your forms will look exactly the way you want. If you want to customize the text in your buttons and labels, check out Choose button and label text.