FormAssembly's Theme Editor Version 2.0 allows you to quickly and easily style your forms within the Form Builder.
Using the Theme Editor 2.0, you can apply private and public themes as well as customize existing themes to meet your needs. Follow the steps below to apply and customize your form themes.
Please note: To use the Theme Editor 2.0, you must upgrade your form to Form Builder 5 if you haven't done so already.
Accessing and Applying Themes
To begin using the Theme Editor 2.0, click the Themes button from the top Form Builder menu
From the Themes menu, you'll be able to browse private and public themes, as well as customize any of the currently available themes.
For Professional and Premier users, all public themes are available for customization. When you customize and save a theme, it will become one of your private themes.
Enterprise admins are able to create their own public themes and decide which specific theme elements will be available to their users.
For all private and public themes, you have the option to apply the existing theme to your form or to customize the theme. If you choose to apply the theme, it will be immediately applied in the form builder.
Within the Theme Editor 2.0, you also have the option to customize all existing themes. Customizing a theme will alow you to edit options like the background color, the primary color, the font size, and so on.
Additional details for these elements are explained in the table below.
Please note, you may not see all options available on all themes, depending on theme you have selected.
|Background color||This is the color of the background that will show around the edge of the form.|
|Primary color||The color of the submit button and the next/previous page buttons.|
|Hover color||The color of the submit button and the next/previous page buttons when your respondent hovers their mouse over the button.|
|Label color||The color of the text in your field labels.|
|Font||The form's font can be changed using the font dropdown menu.|
|Font size||Use this option to increase and decrease the form's font size.|
|Title opacity||Adjusting this slider will determine the transparency/opacity of the title.|
|Form padding||Adjusting the padding will add/remove space from the sides of the form.|
|Content Spacing||Adjusting the content spacing will add/remove margins between fields and form elements.|
|Preview error messages||Enabling this option will allow you to preview all error messages within the form.|
After making any changes to an existing theme, you will need to Save the theme at the top right of the theme menu. This is also where you have the option to rename the theme by clicking on the pencil icon next to the theme name:
Create or Request Themes
We are looking for help to make FormAssembly themes more engaging, appealing, and advanced. You can request the theme development kit if you are a designer and you want to create themes for FormAssembly users at large. CSS/Sass knowledge is helpful.