Article

    Themes, branding & custom CSS | Forms Help

    3 min read
    Last updated 4 days ago

    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 from the Settings tab on the form editor. Themes are available on all plans, including Free.

    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:

    1. Go to Settings > Workspace
    2. Toggle off Show branding
    3. 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.

    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:

    PropertyWhat it controls
    Button colorBackground color of the submit button and primary actions
    Button text colorText color inside the submit button
    Page backgroundThe full-page background behind the form card
    Card backgroundThe form card background
    Text colorLabels, headings, descriptions, and body text
    Input & border colorInput field borders, dividers, and secondary UI lines

    Changes are previewed live in the form builder as you pick colors.

    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 {

    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.