New Feature: Web Form Theme Editor
Disclaimer: As of June 2018, Form Builder 5.0 is the default version of the FormAssembly Form Builder. Along with Form Builder 5.0 we’ve also released Theme Editor Version 2, the default and only theme editor as of October 1, 2018. Visit the release blog post to learn about the Form Builder 5.0 improvements.
As I mentioned awhile ago, we’ve been working hard to develop a WYSIWIG theme editor for FormAssembly. With this new feature, you can now easily style your web forms to match your business’s visual identity or your own personal taste. This was the most-requested improvement on our UserVoice forum, so we’ve finally designed, built, and tested it. Last week we released a beta version, and now we’re ready for the official release.
We’ve provided a number of new predefined themes that you can use for your forms. You’ll find these by clicking the “Browse Themes…” button. Choose a theme, and you’ll be able to preview it on the right-hand side of your screen. This is also where your saved custom themes will appear, so you can reuse them on as many forms as necessary without having to recreate the theme each time. Any themes you create will be available in the Form Builder’s Properties pane for all your forms, just like the current predefined styles. Note that we will continue to add new themes to the collection as we go.
In the Basic Editing you’ll find quick and easy ways to customize your form. You can choose a color scheme, set typography and border styles, and apply some special effects.
We’ve included 24 color schemes–including a blank one if you decide to start all over. Choose one of the 16 background designs to add some visual interest to your form, or apply shadows and rounded corners (these special effects may not display in all browsers). You can also choose from several different typography sets, as well as apply borders to the form and fieldsets.
Those different customization options are designed to work well together, so you can’t go wrong here.
If you would like even more control over the look of your form, or even just want to slightly modify a few elements, check out the “Advanced” tab. Here you’ll have the ability to define each individual element of the form; you can change colors, fonts, sizes, borders and more.
Easier form design without loss of control
Of course, if you would rather continue to use the Custom Code box to add CSS to your forms, that option is still available. In some cases, with detailed CSS rules or if you’re trying to exactly match an existing page’s style, this may still be the best tool. In general (but not always), CSS in the Custom Code section will override CSS from a created theme.
Still have questions?
We’ve written some documentation on the Theme Editor, available in the Support section of FormAssembly. We’ve also reopened the Theme Editor feedback survey and would still like to hear from you there, via Twitter, in the comments here, or in the UserVoice forum.