So you've decided to make your own Web Form Builder theme, eh? Excellent! First you need to do a little bit of prep work. This tutorial will show you how to create a new theme so you don't have to save over an existing one.

Using the Windows version? You need to read this article.

Step 1: Theme Folders

Here's the easiest part! You need to open the folder on your computer that contains all the theme files. In Web Form Builder, go to File > Browse Resources.

This opens the Web Form Builder folder in the Finder. Now just click the sub-folder called themes and you'll see the FBT files for all the themes you have installed.

Step 2: Prepare Your New Theme

The easiest way to create a new theme is to make a copy of an existing one and save over the new copy's files. You don't have to use a styled theme like Academic; you can make a copy of Blank if you like. But we like Academic so we're going to use it for this tutorial. :)

Right-click the theme you want to copy and choose Duplicate.

You've just created a new file with the same file name as the original, but with "copy" added to it. Now that you have a new file, you can go crazy with it and make any changes you want without worry that you're messing up the theme you based it upon.

Single-click this new theme and give it a new name.

A Quick Note About FBT Files

FBT stands for "Form Builder Theme". Ever used a ZIP file before? If you have, you know that it's basically a package full of other files. It's a neat way to keep them all together and save file space at the same time. An FBT file is basically a ZIP file that your computer associates with Form Builder. Therefore, you can rename it from .FBT to .ZIP and look at the files inside of it.

Single-click your new theme file again and change .fbt to .zip.

You can now open the contents of your new theme. Double-click the ZIP file to unpack it. A new folder will be created that contains four items.

There it is! Your new theme and its files, ready to be customized.

Step 3: Edit the Theme

Let's talk about those four items and what you need to do with each of them.

The "descriptor.json" File

This file is very important, as it tells Form Builder how to use the theme. Be very careful when making changes to it! Right-click descriptor.json and choose Open With > TextEdit.app. You need to make a few changes here to reflect your new theme name.

Adjust the display_name, display_name_es, and the theme_css path. Everything is CASE SENSITIVE, so use capital letters in the correct places!

  • display_name: This is the name that will appear in the Theme Browser in Web Form Builder.
  • display_name_es: This is the name that will appear in the Theme Browser of the Spanish-language version of Form Builder.
  • "theme_css": This is the folder where the CSS file that styles the form can be found. Change the value to "theme/[your theme name here]/css/default.css" as seen above.

The "preview" Folder

This folder simply holds a screenshot of an example of your theme. When your theme is styled and ready to go, copy a 460x360 pixel screenshot into this folder and rename it main.png. This image will be displayed in the Theme Browser in Web Form Builder. We'll come back to this later.

The "Resources" Folder

Saving over the files in this folder will have no effect on your theme. They're PNG source files that exist so you can open them in an image editor, make your changes, and save over the images in the theme folder (which you'll learn about in the next section).

Notice that there's another folder inside this Resources folder that is also called "Resources". This second folder contains all the WIF files associated with each graphic. You can open these files in Web Image Studio, make ultra-easy changes to them, and save over the PNG files in the theme folder. It's amazingly simple, and you can learn how to do it here.

The "theme" Folder

Inside of this folder is one item: another folder, which currently uses the name of the theme you based this one upon.

Remember the "theme_css" value in the descriptor.json file? Single click this folder and rename it to the name you put in this value. They must match or your theme will fail!

Inside of this folder are two more folders: css and images.

  • css: This folder contains one file, called default.css. This is where all the code that styles your form is located.
  • images: This folder contains all the images referenced by your theme.

You'll learn more about how to manage the CSS and images in your theme in the next article. First, we need to repack and install your new theme.

Step 4: Zip Up Your New Theme

Once you've made the changes outlined above, you need to recompress everything into a nice, neat FBT package.

Select all four of the files in the main folder of your theme. Right-click and choose Compress 4 Items.

This creates a ZIP file in this directory called Archive.zip that contains all four of these items.

Single-click Archive.zip and rename it. We recommend calling it "Web_Form_Builder_[your theme name].fbt". Don't forget the .fbt on the end!

Step 5: Install Your New Theme

Double-click the new .FBT file and the theme will self-install. Click the Themes toolbar button and your new theme will now appear in the Theme Browser.

Superb! Now that your theme is in Form Builder, you can use it to create a test theme, export the form, and edit its CSS in a code editor. It's the easiest way to see the changes you're making to the style of your new theme, and you'll learn how to do it in the next article.

Ready to move on? Let's go edit your new theme!