Custom Themes
WittyForm includes a visual theme editor that lets you control the look and feel of your forms without writing any code. Create branded themes and apply them across multiple forms.
Opening the theme editor
- Open any form in the builder.
- Click the Theme tab in the right sidebar.
- The theme editor panel will open with a live preview of your form.
Changes are reflected in the preview instantly as you adjust settings.
Color system
The theme editor exposes five color tokens that control the entire form appearance:
| Token | Controls | Default |
|---|---|---|
| Background | Form background and card surface | #FFFFFF (white) |
| Text | Headings, labels, input text | #1F2937 (near-black) |
| Primary | Active states, progress bar, focus rings | #6366F1 (indigo) |
| Button | Submit and navigation button background | #6366F1 (indigo) |
| Button Text | Text color shown on buttons | #FFFFFF (white) |
Click on any color swatch to open the color picker. You can enter a hex value, use the picker wheel, or paste a value from your brand guidelines.
Font selection
Choose from a curated list of Google Fonts optimized for form readability:
- Inter: clean, modern sans-serif (default)
- Roboto: neutral, highly legible
- Open Sans: friendly and readable at any size
- Lato: warm sans-serif with rounded edges
- Montserrat: geometric, great for headings
- Poppins: round and approachable
- Playfair Display: elegant serif for formal forms
- Merriweather: classic serif tuned for body text
- Raleway: light, contemporary sans-serif
- Nunito: soft, well rounded sans-serif
The font applies to all text in the form including labels, placeholders, buttons, and validation messages.
Logo
Upload a logo from the Logo subtab and choose where it sits on the form (top, header, or hidden). The logo carries through to the form header and the submission confirmation screen.
Saving themes
Once you are happy with the look, click Save as theme and give it a name (e.g., "Brand Primary" or "Dark Mode"). Saved themes appear in the theme library and can be reused across all your forms.
Applying themes to multiple forms
- Open a form and go to the Theme tab.
- Click Browse themes to see your saved themes.
- Click a theme to preview it, then click Apply to use it.
Applying a theme is non-destructive: you can switch between themes at any time. Changes to a saved theme do not automatically propagate to forms already using it. To update, re-apply the theme to each form.
My Themes library
Every theme you save is stored in your My Themes library, kept on the server and tied to your account. Open the library from the Theme tab of any form to apply a saved theme, rename it, or remove one you no longer use. Themes you build once are ready to reuse across all of your forms.