Paid accounts on Formstack come with the ability to choose a pre-built Theme or create your own custom Theme 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.
Creating Your Theme
On the "Builder" tab of your Form, you will see the "Theme" tab at the bottom left-hand corner. Click the "Theme" tab to create a new Theme.
Inside the Theme tab you can browse all of your "Themes In Use" and "Themes Not in Use". At the top of your "Themes in Use" you will see the theme that's Active on your Form, highlighted in green and labelled "Active". You can Create a New Theme by scrolling to the bottom of the "Themes In Use" and clicking the "Create New Theme" link.
In your New Theme settings, start by naming your form, then choose a stock theme to start editing. Once you've selected which theme to use as a starting point and named your Theme, you may choose to Save or Save and Activate. Save and Activate will save your new theme and set it as the Active theme on your Form. Click "Save" once you've decided.
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 webpage it is on.
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, trying using the iframe embed method.
Editing Your Theme
The Theme builder is broken down into different sections; "Quick Styles", "Advanced Styles", and "Advanced Code Editor" each offering different ways to customize your form.Important Notes When Editing:
- 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 effect all Forms for which a Theme is "Active".
Quick StylesThe "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 too.
The "Edit Form Colors" button will bring up a new screen that allows you to set colors on 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 sub-sections 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.
To set any Theme as active, find it in your "Themes in Use" or "Themes Not in Use" on the Theme Tab and click the "Activate" button that appears when you mouse over it. Alternatively, when you are making changes to a theme while in the Theme Builder and would like to apply them to your live Form, use the "Save and Activate" option in the Theme Builder.
Using Your Theme
Set Theme as Active
Save and Activate in Theme Builder
Stock ThemesHere are some preview images of the Stock Themes we currently offer. These are the themes you must use as a starting point when Creating a New Theme. Currently the Stock Themes we offer are Formstack Light 2016 and Formstack Dark 2016:
Formstack Light 2016
Formstack Dark 2016