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 ThemeTo 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.
OverviewOn 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.
Browse ThemesHere, 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 EditingIn 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 EditingIn 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.
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.