Manage Styles
How to use form styles: read the style cards and see which forms use each style, add a style from a ready-made look, add your logo in the header and your details in the footer, set the page, form box, field and button design with a live desktop and phone preview, save, give a form a style, and duplicate or delete styles.
On this page
A style is the look of a form. It holds your logo, your colors, your font and your own button, and it decides what a visitor sees above and below the fields. One style can be shared by as many forms as you like, so when you change the style, every form that uses it changes with it.
There are two pages. Form Styles lists every style in your account. Clicking a style opens the style editor, where you set it up while a sample form on the right shows the result as you work.
To get here, go to Settings, click Forms, then click Manage Styles in the toolbar.
The styles and forms in these pictures are examples.
What a style controls
| Part | What it is |
|---|---|
| Header | Whatever you want above the fields. Usually your logo, sometimes a line of welcome text. |
| Footer | Whatever you want below the button, such as your address, phone number or small print. |
| Design | The page background, font, text color and form width, an optional box around the form, the look of the labels and fields, and the button: its wording, color, shape, size and position. |
A form with no style uses the standard look: a white page, the form’s own name as the heading, and a teal Send button.
The Form Styles page
From top to bottom, the page has three parts: the toolbar, the search box, and one card for each style.
The toolbar
| Button | What it does |
|---|---|
| Forms | Goes back to the list of forms. |
| Add Style | Opens the window for creating a new style. See Adding a style below. |
| Help | Offers a short guided tour of the page, or opens this guide. |
Reading a style card
Each style has its own card. Styles are listed by name, A to Z.
| Part of the card | What it tells you |
|---|---|
| The picture | A small drawing of a form in this style, with the style’s own background, field shapes, button color and button wording. If the header has a logo, the logo is shown too. Click the picture to edit the style. |
| The name | The name of the style. Click it to edit the style. |
| The line under the name | The font the style uses, and whether it has a header and a footer. |
| Used by | The forms that use this style. Click a form’s name to open that form. When more than three forms use it, the card names the first three and adds “and 1 more”. Hold your mouse over those words to see the rest. |
| Not used by any form yet | In orange. No form has been given this style. |
| Edit | Opens the style editor. |
| The two pages | Duplicate. Makes a copy of the style. See Duplicating a style below. |
| The bin | Delete. Deletes the style, after asking you to confirm. See Deleting a style below. |
Next to the search box, a short line counts your styles and how many are in use, for example 5 styles, 3 in use.
Searching
Start typing in the search box and the cards narrow to the styles whose name matches. The line next to the box changes to tell you how many are showing, for example Showing 1 of 5. Click the X next to the box to clear the search.
Adding a style
- Click Add Style in the toolbar.
- Type a name.
- Under Start from a look, click the look you want to begin with.
- Click Create and open.
The style is created and the editor opens straight away, so you can add your logo and adjust anything you like. A new style has no header and no footer until you add them.
The six looks are starting points. You can change every setting afterwards, or switch to a different look in the editor.
| Look | What you get |
|---|---|
| Classic | The standard look: a white page and a teal button. |
| Soft card | A pale grey page with the form on a white, rounded panel. Rounded fields and a full-width button. |
| Bold | Bold labels and a red, pill-shaped, full-width button. |
| Minimal | A narrow form in black and white, with square fields and a square black button. |
| Warm | A cream page, a classic serif font, and the form on a panel with an amber button in the center. |
| Midnight | A dark page with light text, the form on a dark panel, and a blue full-width button. |
A name can be up to 100 characters. Choose one you are happy for visitors to see: when a form uses a style, the style’s name is shown as the page title in the visitor’s browser tab.
The style editor
Click a style’s picture, its name or its Edit button to open it.
The settings are on the left. The live preview on the right is a sample form drawn in your style, and it changes the moment you change a setting. At the bottom of the page, a bar shows whether you have unsaved changes and holds the Save buttons.
Nothing changes on your real forms until you click Save.
The toolbar has two buttons. Form Styles goes back to the list of styles, and Help offers a guided tour of the editor or opens this guide.
The name, and the three tabs
Type in Style name to rename the style. Remember that visitors see this name in their browser tab.
Below the name, three tabs switch between the parts of the style:
- Design – the colors, font, width, box, fields and button.
- Header – what shows above the fields.
- Footer – what shows below the button.
The Design tab
The Design tab is split into five groups: Quick looks, Page, Form box, Labels and fields, and Button.
Quick looks
Click a look to set every design setting in one go. They are the same six looks offered when you add a style. Your header, your footer and the wording on your button are kept.
A look is a starting point. Once it is applied, change any setting underneath it to make the style your own.
How the color settings work
Every color setting has the same three parts:
- A color square. Click it to choose a color from the color picker.
- A code box. If you know your brand color’s code, type or paste it here, for example #E8590C.
- An X, on most colors. Click it to go back to the standard color. The box then reads Standard.
Standard means the form uses its normal color for that part. Leave a color on Standard unless you want to change it.
Page
| Setting | What it changes |
|---|---|
| Background | The color of the page behind the form. |
| Font | The lettering used for the whole form. Choose from Standard, Modern, Arial, Verdana, Tahoma, Trebuchet, Georgia, Times New Roman and Courier. |
| Text color | The color of the text on the page. |
| Form width | How wide the form is on a computer screen. See the table below. |
| Form width | On a computer screen |
|---|---|
| Narrow | About a third of the screen. Good for short forms. |
| Standard | A little under half of the screen. This is the width forms have always had. |
| Wide | About two thirds of the screen. |
| Full | The whole width of the screen. |
On a phone, a form always uses the full width of the screen, whichever width you choose.
Form box
A box puts the form on its own panel, so it stands out from the page behind it. It works best together with a page background color.
| Setting | What it changes |
|---|---|
| Use a box | Turns the panel on or off. The three settings below it only apply while the box is on. |
| Box color | The color of the panel. |
| Rounded corners | Drag the slider to round the corners of the panel, from 0 (square) to 40. |
| Shadow | Adds a soft shadow under the panel. |
Labels and fields
| Setting | What it changes |
|---|---|
| Label color | The color of the wording above each field. |
| Bold labels | Makes the labels heavier, so they stand out. |
| Field shape | The corners of the boxes people type in: Standard, Square, Rounded or Pill (fully rounded ends). |
| Field background | The color inside the boxes. |
| Field text | The color of what a visitor types. |
| Field border | The color of the line around each box. |
| Highlight color | The glow around the box a visitor is typing in, and the color of ticked checkboxes and chosen options. Your brand color works well here. |
Button
| Setting | What it changes |
|---|---|
| Wording | The words on the button. It starts as Send. Change it to whatever fits, such as “Request Info” or “Sign Me Up”, up to 40 characters. If you clear the box, it goes back to Send. |
| Button color | The color of the button. |
| Wording color | The color of the words on the button. |
| Shape | Standard, Square, Rounded or Pill. |
| Size | Fits the wording makes the button just wide enough for its words. Full width stretches it across the form. |
| Position | Left, Center or Right. This only applies when the size is Fits the wording; a full-width button has no position to choose. |
If the wording would be hard to read on the button color you picked, an orange warning appears under Wording color. Choose a lighter or darker wording color until it goes away.
Starting the design again
At the bottom of the Design tab, click Put the design back to the standard look to clear every design setting. Your header, your footer and the wording on your button are kept.
The Header tab
The header is shown above the fields on every form that uses the style. Most people put their logo here.
To add your logo:
- Click the Header tab.
- Click in the editing area, then click the picture button in the editor’s toolbar.
- Choose Upload, pick the logo file from your computer, and click Save.
- To put the logo in the middle, click it once and then click the center button.
- To make it smaller, click it once and drag a corner.
You can also type text in the header and format it with the toolbar: bold, italic, size, color, links, lists and tables are all there.
- The logo also appears on the style’s card on the Form Styles page, so styles are easy to tell apart.
- If the header is left empty, the form shows its own name as its heading instead.
Keep your logo modest in size. A logo around 250 pixels wide fits comfortably on a phone and inside a form box. Check it with the Phone button on the live preview.
The Footer tab
The footer is shown below the button. It is a good place for your address, your phone number, or a line of small print such as “We never share your information”.
It has the same editor as the header, so you can format the text, add a link, or add a picture. Leave it empty if you do not want a footer.
The live preview
The preview is a sample form with one of each kind of field, drawn exactly the way your real forms will be. It is not one of your own forms, and nothing typed into it goes anywhere.
- It changes as you work, including while you type in the header or footer.
- It stays in view while you scroll down through the settings.
- When the form is taller than the preview, scroll inside the preview to see the button and the footer.
- Click Desktop or Phone to see the form on each kind of screen.
Always look at both before you save. A logo or a form width that looks right on a computer can be a tight fit on a phone.
Saving
The bar at the bottom of the page is always in view.
| You see | What it means |
|---|---|
| All changes saved | The style on your forms matches what is on the page. |
| Unsaved changes | In orange. You have changed something that has not been saved yet. |
| Save | Saves the style and keeps you on the page, so you can carry on. |
| Save and go back | Saves the style and returns to the Form Styles page, where the style is highlighted in green for a moment. |
| Back to styles | Returns to the Form Styles page without saving. |
When you save, every form that uses the style picks up the change straight away. There is nothing to do on the forms themselves.
If you try to leave the page with unsaved changes, your browser asks whether you really want to leave. Stay on the page and click Save to keep your work.
Giving a form a style
A style does nothing until a form uses it, and the style is chosen on the form itself:
- Go to Settings and click Forms.
- Click the name of the form to open it.
- In the form’s settings, choose the style under Style.
Back in the style editor, the card under the settings lists every form that uses the style.
- Preview opens the live form in a new tab, so you can see the style on a real form. It shows the style as it was last saved, so save first.
- Open opens the form’s own page.
Duplicating a style
When you want a style that is nearly the same as one you already have, or you want to try out some changes safely, copy it.
- On the Form Styles page, find the style.
- Click the two pages on its card.
- The copy has the same header, footer and design as the original, with (Copy) added to its name.
- A green message confirms it, and the copy is highlighted in green for a moment so you can spot it.
- No form uses the copy yet. Changing it does not affect the original or any of your forms.
- Click Edit on the copy to rename it and change whatever needs to be different.
Deleting a style
- Click the bin on the style’s card.
- Read the message. It names the forms that use the style.
- Click Delete to go ahead, or Cancel to keep the style.
Deleting a style cannot be undone. The forms that used it are not deleted and keep working, but they go back to the standard look, with no header and no footer.
If you want those forms to keep a logo, give them another style first, or edit this style instead of deleting it.
Who can change styles
Form styles need the Manage Forms permission. Without it, the Manage Styles button is not shown on the Forms page. If you need it, ask your account administrator.
On a phone or a small screen
Both pages work on a phone. On the Form Styles page the cards stack in a single column. In the style editor the settings come first and the live preview moves below them, so scroll down to see the result of a change.
Help and the tour
Both pages have a Help button at the right of the toolbar, with two choices:
- Take the tour walks you through the page in about a minute. It points at each part in turn and explains it.
- Open the help guide opens this guide.
Use Next and Back to move through the tour, or the X to leave it. You can take it again at any time.
Tips
- Make one style for your website and give it to every form on the site. When your logo or colors change, you only update one place.
- Start from a quick look. It is quicker to adjust a look than to set every color by hand.
- Use your brand color for the button and the highlight color, and leave most other colors on Standard. A form with two or three colors looks more professional than one with many.
- Change the button wording to say what happens next, such as “Request Info” or “Book My Tour”. It reads better than “Send”.
- Check Phone in the live preview before every save.
- Before making big changes to a style that forms already use, duplicate it and experiment on the copy.
- Name a style for what it is used for, and keep the name presentable, because visitors see it in their browser tab.