Account owners and Admins can create and manage themes. Form Authors can add existing themes to their forms.
All OpenForms are built on a base theme that is clean, easy-to-use, and assessed against WCAG 2.2 Level AA. By default, your forms are accessible to a broad range of respondents. This is our base theme:
You can build on the base theme to customize your form's appearance so that it aligns with your organization.
For example, you can use basic styling options to change items like the primary and secondary colors, font, logo and banner appearance, as per this basic theme example.
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, but you will need front-end developer experience to test and maintain advanced styling options.
Occasionally, we may update our base theme to include new features or styling options. These updates may clash with advanced styling in external stylesheets or CSS, or otherwise interfere with your custom themes. We will notify you before we make any updates and let you know which themes you need to inspect or update.
Create a New Theme
To design and create a new theme:
- Go to Admin > Themes to view the list of existing themes.
- Select Create theme to start from scratch or select Duplicate from the ... menu of an existing theme to copy it as the basis for your new theme.
- Use the fields to add your Basic styling and any Advanced styling.
- Select Create.
Theme Fields
As you create or edit a theme, you’ll notice the Base theme section which tells you which version of our base theme is in use; existing themes will also be marked Up to date if they are current. You can use the following options when designing your theme:
Basic styling:
- Theme name: Give your theme a name to be used when adding it to a form or in the Themes list.
- Theme description: Explain what forms this theme should be used for. For example, when you have a specific theme for the parks and recreation department forms that differ from other themes in your organization.
- Font: Use the drop-down menu to select a font; you can see what it looks like in the Sample text.
- Primary color: Use the color picker or a hex code to select the color for the header background and primary action buttons, such as the continue or submit buttons.
- Secondary color: Use the color picker or a hex code to select the color for the progress bar and interactive element hover states.
- Destructive color: Use the color picker or hex code to select the color for the remove button in repeatable groups.
Your organization may have guidelines that state the fonts, colors, and logo you can use. If they do not, ensure that you pick accessible colors for your theme.
- Logo (Optional): Upload a logo to display in the form header. We recommend using a logo with a minimum size of 80x80 px, and please note that this option will not appear until you have saved your theme.
- Select which form logo and title layout should be used: Choose the layout for your logo and title for use in the form and the response PDF document. Select from:
- Primary theme color background behind form name and logo
- White background behind form name and logo, primary color divider
If your logo is white, we recommend selecting Primary theme color background behind form name and logo or your logo will appear invisible.
- Banner preview: This is not an editable field. It shows the preview of your form header based on your selections of other style options.
- Error message display position: Use the drop-down menu to choose where to display error messages on your form. Choose from:
- Next to the fields
- Top of the form
- Bottom of the form
Advanced styling:
- External stylesheet URL (Optional): Add a link to an external stylesheet; this link must start with https://
- Custom CSS styling (Optional): Add CSS code to this field for custom styling.
We strongly recommend that you delegate form customization to a qualified front-end developer, as we don’t currently offer dedicated support for front-end development questions and issues. An appropriately qualified front-end developer will test and maintain your customized themes for accessibility compliance, usability, and cross-browser and device support.
Add a Theme to a Form
Any admin or form author with access to a form can change the theme:
- Go to your form > Settings > Display settings.
- Expand Choose form theme to see the themes list. If you have no organization defaults for the theme and have never changed the theme before, it will default to the OpenForms Standard theme.
- Select a theme and Save display settings.
- Save and Publish your form.
Themes must be applied individually as you cannot apply themes in bulk. Admins can set a default theme in Organization defaults, but they will only apply to newly created forms.
Manage Your Themes
In Admin > Themes, you can also:
- View the list of existing forms and select a theme name to edit it. You can also select Edit from ... menu.
- Use the Status column to see which themes are In use. To view the forms using the theme, select the theme name and then See all in right-hand panel.
This will show you a searchable list of all forms using the theme and allows you to select one to go to the form’s edit screen.
- Select Duplicate from the ... menu to copy that theme and create a new one.
- Select Delete > Delete theme from the ... menu to permanently remove a theme. You cannot delete a theme if it is in use on a form.
What Else?