How to Customize Your Form's Colors, Fonts and Style
Style your FormRobin form with the built-in Style Editor: in the form editor, click Styles to pick a theme preset or set fonts, colours, fields and buttons.
Overview
The Style Editor changes how your form looks. You can:
- Apply a theme preset - 10 ready-made styles
- Change the font - 11 font families, serif and sans-serif
- Set the base font size - 12 to 24 px
- Set colours - text, background, input fields and button
- Style input fields - border colour and width
- Style the button - colours and corner radius
- See changes at once - the form updates while you edit
| Setting | Options or range | Default |
|---|---|---|
| Theme presets | 10 ready-made styles | Default |
| Font family | 11 fonts from Google Fonts | Geize |
| Font size base | 12 to 24 px | 16 px |
| Field border width | 0 to 10 px | 1 px |
| Button border radius | 0 to 100 px | 4 px |
The Style Editor works on both plans, Free Plan and Individual Plan. On the Free Plan it shows a small upgrade banner, but every styling control is available.
How do I open the Style Editor?
- Open your form in the form editor (Forms → ⋮ → Edit).
- Click Styles in the editor's top bar.
Keyboard shortcut: Ctrl+Shift+S (Cmd+Shift+S on a Mac) opens and closes the Style Editor.
To close it, click the X in its corner, press the shortcut again, or click outside the panel. The Style Editor is available while editing, not in Preview.
What are theme presets?
A preset applies a complete look in one click. Choose one from the Theme Presets list at the top of the Style Editor:
- Default - FormRobin default styling
- Random - a new colour combination each time, built from colour-harmony rules, with a random font and shapes
- Clean Blue
- Elegant Purple
- Warm Orange
- Success Green
- Sunny Yellow
- Corporate Blue
- Research Blue
- Commerce Pink
After choosing a preset you can still change any single setting. As soon as you do, the preset selection clears, because you now have a custom style.
Custom Settings
Below the presets, Custom Settings gives you control over each part of the design.
Font Family
Choose from 11 fonts, loaded from Google Fonts: Geize (default), Roboto, Montserrat, Domine, Nunito Sans, Quicksand, Bona Nova, Libre Baskerville, Noto Serif, Arvo and Solway.
Font Size
Font size base sets the base text size of the form, from 12 to 24 px (default 16 px).
Colors
Every colour uses your browser's colour picker, and the form updates as soon as you pick:
- Text color and Background color - the form's text and background
- Field style → Text color, Background color and Border color - the input fields
- Button style → Primary color (the button text) and Secondary color (the button background)
Field Style
- Border color - the colour of input borders
- Border width - 0 to 10 px (default 1 px); 0 gives borderless inputs
Button Style
- Border radius - 0 to 100 px (default 4 px); 0 gives square corners, higher values rounder ones
Live Preview and Saving
Changes appear on the form in the editor straight away. Click Save (or Ctrl/Cmd+S) to keep them: the saved style is used on the live form and wherever the form is embedded (see Embedding Forms on Your Website).
How do I return to the default look?
Choose Default under Theme Presets to go back to FormRobin's default styling, then click Save.
Troubleshooting
The Style Editor does not open
- It opens only while you edit a form. If you are in Preview, click Exit preview first, then Styles.
A new font takes a moment to appear
- Fonts are loaded from Google Fonts when you choose them, so the first display can take a moment on a slow connection.
My styles do not show on the live or embedded form
- Click Save after styling. Unsaved changes stay in the editor only. For embedded forms, see Embedding Forms on Your Website.
Still stuck? Email support@formrobin.com with the form's link and a screenshot of the Style Editor.
Frequently Asked Questions
Can I change my form's colours and fonts?
Yes. Open the form editor and click Styles.
Is the Style Editor available on the Free Plan?
Yes. Every styling control works on the Free Plan; the upgrade banner in the panel is only informational.
Can I add custom CSS or a background image?
No. Styling is done with the Style Editor controls. To show a logo or picture, add an Image block to the form; to format question text, see Formatting Form Text.
Do styles apply to published and embedded forms?
Yes. Saved styles are part of the form, so the live form and every embed use them.