Theme Browser
Switching designs is incredibly easy using the Theme Browser. Just click the Themes toolbar button, choose a design that looks like it would work for your form, and watch your form adopt the design instantly. You can switch to another theme at any time. Your form has a pro-made design with one click! You can purchase more Web Form Builder themes in our theme store.
The Theme Browser can also be opened by going to Actions > Apply Theme or pressing Cmd+T.
Every Web Form Builder theme that is installed on your computer is shown here. You can get a closer look or more of an overview of all themes by adjusting the slider at the bottom.
There are a couple other tools here that are very useful.
- Show: Filter whether you’d like to show all themes, reponsive themes, or standard themes.
- Reset Form Styles: Once you’ve applied a theme, you can still change the styling of individual elements. That’s part of the total freedom Web Form Builder gives you. When you switch themes, your custom styling may be preserved. To change everything to the new theme’s styling, click this button.
- Browse Theme Images: Click this button to open the folder on your computer where the selected theme’s images are found. This way you can get a close look at all the images that are required to make that theme work.
- Import Theme: If you’ve purchased and downloaded a Web Form Builder theme, it may not yet be available in the Theme Browser. Click this button and locate the FBT file on your computer. (Note that moving themes by hand into the themes folder may not install all theme files.)
There are a few more tools in the File menu that can be used to manage themes.
- File > Import Theme: Imports themes without needing to open the Theme Browser. This is the preferred, no-fail method of importing themes.
- File > Browse Resources: Opens the folder on your computer that contains all the Web Form Builder files. Here you can access commonly used images, all the themes that are installed, the text files that contain predefined list information, form templates, and time zone lists. Do not mess with these files unless you’re confident that you know what you’re doing!
- File > Browse Theme Images: Opens the folder on your computer where all the images from the currently selected theme are located. In the subfolder Resources, you’ll find all the WIF files for the theme’s images. You can open these files with Web Image Studio, make ultra-simple edits, and save over the associated PNG file in the main folder. It’s an amazingly efficient way to edit your theme graphics.
Standard vs. Responsive Themes
You may have noticed in the Show drop-down that you can filter by standard or responsive themes. So what exactly is the difference between the two theme types?
Well, a standard theme is the type you’re probably already familiar with. You use them regularly. You set the form width, label positioning, and other features, and the form looks the same in the browser no matter what. Even if the form is bigger than the viewing screen.
But Web Form Builder is the first form app in the world to offer responsive themes. This means that your form theme responds to the size of the screen viewing the form and customizes the design to be a perfect fit for that specific device.
So a form design that’s wide with left-aligned labels on a large monitor/browser would switch to a narrow column with top-aligned labels for a better experience on a mobile device. Many things can change in a responsive design to create a better experience for the person filling out the form. No matter the size of the screen, the form always looks perfect. As a result, more people are likely to fill out the form.
If you have any responsive designs installed, they’ll be labeled as such in the Theme Browser.
And you can always select Responsive Themes from the Show drop-down to see which ones are installed on your computer. To learn more about responsive form themes, read this article.
Because responsive designs change their width according to the size of the screen viewing them, this type of theme handles form and element widths slightly differently:
- The Form Width property is set as a percentage instead of a fixed number of pixels, and you can supply a Max. Width in pixels so that your form is never larger than a certain size.
- The Text Area and Section Break elements have a Max. Width property that is configured in pixels so that these elements are never wider than a certain size.
- Image and Logo elements scale down to fit the screen if they are wider than the screen size.
Note: If you are embedding a form in a website made with Visual Site Designer, your form will not be responsive even if you use a responsive theme. This is because the container VSD makes to hold your form is not itself responsive.
Creating Custom Form Themes
You can create your own custom form themes install them, and share them with others. You can also customize form themes that you already have. The process is quite in-depth, but easy to handle once you have a little experience doing it. To learn how to create/edit form themes, read this article.
Once you’ve built your form, set up all the behind-the-scenes action, and applied a theme or created your own design, there’s only one thing left to do: Show it to the world.
