Paid and Trial accounts on Formstack come with the ability to choose a pre-built Theme or create your own custom Theme. This is done using our Theme builder. You can even include custom HTML and CSS on a custom Theme! The number of custom themes you can build depends on your subscription level.
On the "Build" page of your Form, you will see the "Style" tab in the upper left corner. Click the "Style" tab to create a new Theme.
Inside the Style tab, you can search for themes in your account and also sort your themes. You'll see the active theme used on your form listed at the top. You can create a new theme by selecting the "Create Theme" button.
In your new theme, start by giving your theme a name. You can then proceed to begin changing the styling options for your theme. You'll see Quick Styles at the top, which are easy, quick edits. Open up the Advanced Styles tab to unleash all the theme options you can customize.
Once you're at a good point, you may choose to Save, Save as New, or Save and Activate the theme. Save and Activate will save your new theme and set it as the Active theme on your Form.
Important Notes When Editing:
One thing to keep in mind is that Themes only apply to forms that are hosted by Formstack. If you're embedding a form on your own website, it will include the styling you applied to your form via your custom Theme, but will not include styling outside of the form box and may be affected by the styling of the web page where you've embedded. In this case, you may need to alter the CSS on your Theme. You can do this in the Advanced Code Editor inside the Theme Builder.
Note: If there are code conflicts in regards to formatting, styling, or functionality when you embed the form on your site, try using the iframe embed method.
Editing Your Theme
The Theme builder is broken down into different sections; "Quick Styles", "Advanced Styles", "Theme Details", and "Advanced Code Editor" each offering different ways to customize your form.
- When making changes to a Theme you must explicitly click the save button to apply changes to your Theme.
- Changes to a Theme will not be reflected on your Live Form unless the Theme you are editing is your "Active" theme.
- Using the "Save and Activate" option is a great way to ensure that you are making changes to your live form.
- Saved changes will affect all Forms for which a Theme is "Active".
The "Quick Styles" Section allows you to quickly make broad-stroke changes to your Form's styling. In specific, this section allows you to customize: Form Colors, Form Font, Font Sizes, Spacing, and Field Style. This allows you to set the overall look and feel of your form, and choose from well over 50 different fonts.
The "Edit Form Colors" button will bring up a new screen that allows you to set colors in many different areas of your form and includes some sample fields for you to see what the changes will look like. After you get it looking the way you want, click "Save Colors" to go back to the Theme Builder.
The Advanced Styles section allows you to adjust the fine details of your Form's styling. This section has subsections that allow you to make detailed edits, such as specific text alignment, specific padding/spacing adjustments, customize buttons, and more. Make sure to check out the "Additional Components" section. By customizing the Primary, Secondary, and Tertiary colors you can change the colors on the small details of your form, such as the File Upload Button and scroll bars.
Use the options in the Advanced Styles section to put on those perfect finishing touches or change almost everything about your form and really make it yours!
Advanced Code Editor
Sometimes you have a need to go off the beaten path with your Form, or you're a pro web designer and like to do things your own way. This is where the Advanced Code Editor comes in. We have another great support document to offer CSS help using this powerful addition to the Theme Builder.
Using Your Theme
You can hover over any theme in your Theme Library and select "Apply" to set this as the active theme on your form. To set the Theme you're working on as active, select the "Save and Activate" option from the top of the theme editor.
Set Theme as Active
Save and Activate in Theme Builder
Here are some preview images of the Stock Themes we currently offer. These are the themes you can use as a starting point when creating a new theme.