The Theme Editor has three panels to work in. Each panel gives you a different level of control over the look of your form.

Browse Themes

The first panel is the “Browse Themes” panel. Here, you can choose from public themes and themes you have previously created and saved. If you click on a theme, you’ll see options to modify it or apply it to your current form. For themes you’ve created, you’ll also see the option to delete the theme.

Basic Editing

In the Basic Editing panel you can select a color scheme, set a background image, choose typography and border styles, and apply some special effects. Note that some of the special effects only work in the most modern browsers. However, applying them will not break your form in any way for those who do not have updated browsers.

Advanced Editing

In the Advanced Editing panel, you have specific control over almost all aspects of your form’s appearance. For example, the forms are 770px by default, but for a form that is going to be used on a handheld device, you may only want the width to be 350px.

If you chose a color scheme, typography, or border style in Basic Editing, your settings will appear in their appropriate space in Advanced editing. For example, the background color of the scheme will appear in the “Web Page Background” section of Advanced editing. You can then edit using the different controls you see, which are described below.

Background Image

Applying a background image to your form can help it fit in with the rest of your website or provide an extra level of personalization. You can also use this, for example, to apply a logo to the top of all your forms.

There are several ways you can change the effect the image has on the background. The default setting for the background image is “Tile,” which will repeat the image horizontally and vertically as many times as possible.

If you have something like a logo, you probably don’t want to repeat it at all. In that case, choose “Does not repeat.” In this case, you may also want to adjust the position of the image as well.

You can also set the image to repeat either horizontally or vertically. You might do this if you have a gradient, for example.

Positioning

When positioning an image, whether in the background or somewhere else on the form, you have three options.

Pixels

First, you can position the image using pixel distances. If you enter 10px 20px in the Position box, your image will be 10 pixels from the left edge of the form preview and 20 pixels from the top of the form preview. If you only specify one value, it will be interpreted as the x value, and the y value will be set to 50%.

Percentages

A second way to position is using percentages. As with the pixels, you can specify two percentages, and the first value will place your image x% horizontally within the form area, and the second value will place the image y% vertically within the form area. As with pixels, if only one value is specified, it will be interpreted as the x value and the y value will be set to 50%.

Keywords

If you don’t need to be precise about the positioning, you can use keywords to tell the browser generally where to place the image. The keywords you can use are separated into y and x related keywords.

The y-related keywords tell the browser where on the page to place the image vertically. They are: top, center, and bottom.

The x-related keywords tell the browser where on the page to place the image horizontally. They are: left, center, andright.

As with the other methods, you need x and y keywords. The possible combinations are:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

If you only specify one value, the other will be set to “center”. For more information on positioning images, check out the W3Schools CSS Tutorial.

Margins and Padding

Margins and padding define the space around your form elements. Margins create space around the outside of the border of an element, while padding creates space around the inside of the border. For example, increasing the padding will increase the space between the border and the text in the element.

As with positioning the background image, there are a few ways to define the margins and padding. You can use either pixels or percentages. You can even use negative values to produce the effect you’re looking for.

You can define margins and padding on all four sides of an element. If you enter one value into the input, that value will apply all the way around the element. If you enter two values, the first value will define the top and bottom areas of the element, and the second will define the left and right areas. If you enter four values, they will apply in this order: top, right, bottom, left.

Screencast

A screencast of the Theme Editor’s capabilities is available here.