Themes, branding & custom CSS
Customize how your forms look to match your brand and your respondents' preferences.
Theme options
Each form has a theme setting with three options:
- Light — white background with dark text. The default.
- Dark — dark background with light text. Great for embedding on dark websites.
- System — automatically matches the visitor's device preference (light or dark mode).
Set the theme in the form builder under the form settings panel. Themes are available on all plans, including Free.
Branding footer
By default, all forms show a "Powered by Dialed Forms" footer at the bottom. This links to the Dialed Forms website.
On Starter plan and above, you can remove the branding footer:
- Go to Settings > Workspace
- Toggle off Show branding
- Save
This applies to all forms in your workspace.
Custom branding (Pro)
On Pro plan and above, the Design tab in the form builder unlocks full visual customization.
Logo
Add a logo to the top of your form by entering a publicly accessible image URL. The logo appears above the form title on both direct links and embeds.
For best results, use a square or wide logo in PNG or SVG format.
Color palette
Customize six color properties, each independently configurable for light mode and dark mode:
| Property | What it controls |
|---|---|
| Button color | Background color of the submit button and primary actions |
| Button text color | Text color inside the submit button |
| Page background | The full-page background behind the form card |
| Card background | The form card background |
| Text color | Labels, headings, descriptions, and body text |
| Input & border color | Input field borders, dividers, and secondary UI lines |
Typography
Choose a font family from the dropdown:
- System default — uses the visitor's operating system font
- Inter — clean, modern sans-serif
- Georgia — classic serif
- Courier New — monospace
- Arial — widely available sans-serif
The selected font applies to all text on the form — labels, inputs, help text, and the submit button.
Custom CSS
For full control, add custom CSS in the freeform textarea. Your CSS is injected after the built-in styles, so it can override any default.
Two data attributes are available for targeting:
[data-field-slug="attribute_slug"]— target a specific field by its Attio attribute slug[data-field-type="text"]— target all fields of a given type (e.g.text,select,number)
Example: Make the email field label bold:
[data-field-slug="email_addresses"] label {
font-weight: 700; }
Custom CSS is sanitized before rendering to prevent script injection.
Theme in embeds
Embedded forms respect all branding settings — theme, logo, colors, fonts, and custom CSS apply in both /f/ (direct link) and /embed/ (iframe) routes.
The embed supports an optional ?transparent=1 query parameter that makes the form background transparent, allowing it to blend with the host page.