A form that looks like the rest of your website feels trustworthy to supporters. The Style pane sets the form’s colours, fonts and shape, and can copy them from your website for you.
Before you start
You need engage:read:forms and engage:write:forms.
Copy your website’s style
- Open the form and go to Style.
- In the box at the bottom, enter your website’s address, for example
https://yoursite.org. - Choose Extract from site.
The settings fill in from your website’s own styles. Check the preview on the right and adjust anything that isn’t quite right. If the extraction doesn’t work, you’ll see “Could not extract a theme from that site. Check the URL and try again.”
Set the style yourself
| Section | Setting | What it does |
|---|---|---|
| Colours | Primary colour | Used for highlights and, unless you set a button colour, buttons |
| Button colour | Leave blank to use the primary colour | |
| Background colour | The colour of the card the form sits on | |
| Background image URL | An image shown behind the form. Enter a full address starting with https:// or http:// |
|
| Typography | Heading font | Leave as Same as body font, or choose another |
| Heading size | 18px to 48px; 24px by default | |
| Body font | Inter, Lato, Open Sans, Roboto, Playfair Display or Merriweather | |
| Body text size | 12px to 20px; 14px by default | |
| Shape and branding | Border radius | Square, Slight, Rounded or Pill corners on boxes and buttons |
| Logo URL | The web address of your logo image | |
| Custom CSS | Your own CSS rules, for anything the settings above don’t cover |
New forms start with a blue primary colour, a white background, Inter and slightly rounded corners.
Custom CSS can break a form. Rules that hide or cover fields, buttons or the consent wording can stop supporters completing the form, or hide what they’re agreeing to. Check the preview carefully, and test the published form, after changing it.
Save the style
Style changes appear in the preview straight away. Choose Save draft to keep them. On a published form they go live when you choose Publish changes; see Edit a published form.