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.
Create or Edit a Theme
To create a new theme, click the Themes menu and choose Customize.
To edit an existing theme:
- Click Themes → Customize → Browse Themes.
- Select the theme you wish to edit.
- Click Modify it.
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.
- 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.
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
In the Basic Editing panel, you can select a color scheme, set a background pattern, choose typography and border styles, and apply special effects.
If you choose a color scheme, typography, or border style in Basic Editing, those settings will appear in their respective sections in Advanced Editing.
In Advanced Editing, you may define many aspects of the elements in your form, including margins, padding, field styles, and much more.
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.
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
When positioning an image, you have three options:
|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:|
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.