Theme Editor Version 1 

In this Article
Related Articles

You can use themes to customize your form's style. Change the typography, font sizes, color schemes, background patterns, buttons, borders, padding, and much more with the Theme Editor.

For further customization, add custom CSS or JavaScript

Video Tutorial

Create or Edit a Theme

To create a new theme, click the Themes menu and choose Customize.

Customize Theme

To edit an existing theme:

  1. Click ThemesCustomizeBrowse Themes.
  2. Select the theme you wish to edit.
  3. Click Modify it.

Edit Existing Theme


On the left of the Theme Editor, you'll find the options to modify the theme of your form.

On the right, you'll see the current view of your theme.

Preview Options:

  • Generic Form - Every element is shown for your testing.
  • Your Form See how your form looks with the current theme.
  • Error Examples Preview the errors your respondents may encounter.


Browse Themes

Here, you can choose from pre-made themes or custom themes that you've created.

Select a theme to:

  • Customize this theme
  • Apply this theme to your form
  • Delete this theme
  • Rename this theme


Basic Editing

In the Basic Editing panel, you can select a color scheme, set a background pattern, choose typography and border styles, and apply special effects.

Note: 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.


If you choose a color scheme, typography, or border style in Basic Editing, those settings will appear in their respective sections in Advanced Editing.

Advanced Editing

In Advanced Editing, you may define many aspects of the elements in your form, including margins, padding, field styles, and much more.


Background Image

Applying a background image to your form can provide an extra level of personalization.

You can also use a background image to apply a logo to the top of all your forms.

Although we do not technically have a size limit for background images, for reasons of page loading optimization you should not use a large a file. Most background images are around 1250×800. As a rule of thumb, a resolution of 72 dpi should would well.  In general, we recommend users test to decide what works best for their specific use case.

Repeat Image Options
  • Tile Default setting for background images, which will repeat the image horizontally and vertically as many times as possible
  • Does not repeat Good for logos, shows image only once
  • Repeat Horizontally
  • Repeat Vertically

Position Images

When positioning an image, you have three options:

Pixel Distances
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%.
You can specify two percentages. 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 the pixels, if only one value is specified, it will be interpreted as the x value and the y value will be set to 50%.
The y-related keywords define where on the page to place the image vertically:
  • top
  • center
  • bottom
The x-related keywords define where on the page to place the image horizontally:
  • left
  • center
  • right
Possible combinations:
  • 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 value will be set to center.

Margins and Padding

Margins and padding define the space around your form elements:

  • Margins create space around the outside of an element's border.
  • Padding creates space around the inside of an element's 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.

Define margins and padding on all four sides of an element
  • Enter one value into the input. That value will apply to all four sides of the element.
  • Enter two values. The first value will define the top and bottom sides of the element, and the second value will define the left and right sides.
  • Enter four values. They will apply in this order: top, right, bottom, left.

Terms of Service · Privacy Policy