# formbase Docs — Branding & Domains

# Appearance & theming

Theme your form with colors, fonts, presets, shared workspace themes, cover images, and dark mode.

## Appearance & theming

Colors, fonts, presets, cover images, and dark mode. Make every form feel like a natural part of your brand.

<h2 id="theme-panel">Theme panel</h2>
<p>
  Click <strong>Theme</strong> (palette icon) in the top toolbar. The panel docks to the right and previews changes instantly.
</p>
<p>
  The <strong>Mode</strong> switch (Light / Dark) at the top of the panel changes which color scheme you are editing. Each mode stores its
  own theme values, so you can fine-tune both independently.
</p>
<p>
  The <strong>Theme</strong> picker below it lists your workspace themes for that mode first, then the built-in presets. The footer shows{' '}
  <strong>All changes saved</strong> until you edit something; then <strong>Discard</strong> and <strong>Save</strong> appear.
</p>

<h2 id="presets">Presets</h2>
<p>
  The Theme picker carries seven presets for light mode and nine for dark. Each one applies a full set of coordinated colors, a font, and
  corner rounding in one click.
</p>
<ul>
  <li>
    <strong>formbase default</strong> — applied automatically to every new form, one per mode
  </li>
  <li>
    <strong>Presets</strong> — the curated themes listed below
  </li>
  <li>
    <strong>Custom</strong> — "Only this form". What the picker shows once you change any value by hand
  </li>
</ul>

> ℹ️ **Available on Free**
> <p>
>     Custom themes, including presets and separate light/dark styling, are available on every plan. See{' '}
>     <a href="/subscription-billing/plans-pricing">plans & pricing</a>.
>   </p>

<h3 id="light-presets">Light mode presets</h3>

<h3 id="dark-presets">Dark mode presets</h3>

<h2 id="workspace-themes">Workspace themes</h2>
<p>
  A workspace theme is a named theme for one mode, light or dark, that several forms share. Use one to keep every form on brand: change the
  theme once and every form that uses it follows. To theme both modes, keep two, such as <em>Acme Light</em> and <em>Acme Dark</em>.
</p>

<h3 id="create-workspace-theme">Create a workspace theme</h3>
<ol>
  <li>Open the theme panel on a form, choose Light or Dark, and pick a preset or adjust the colors until the form looks right.</li>
  <li>
    Click <strong>Save as workspace theme</strong> under the Theme picker and give it a name, such as your company name.
  </li>
</ol>
<p>That mode of the form is now linked to the new theme. The picker shows its name and how many forms use it.</p>

<h3 id="use-workspace-theme">Use it on another form</h3>
<p>
  Open the theme panel on the other form, pick the theme under <strong>Workspace themes</strong>, and click <strong>Save</strong>. The
  picker only lists workspace themes for the mode you are editing, so link the light and dark modes separately.
</p>

<h3 id="edit-workspace-theme">Edit a linked form</h3>
<p>A linked form edits like any other form. As soon as your changes differ from the workspace theme, the footer asks where they go:</p>
<ul>
  <li>
    <strong>Save to [theme name]</strong> updates the workspace theme and every form linked to it.
  </li>
  <li>
    <strong>Save for this form only</strong> keeps the change on this form. That mode stops following the workspace theme and becomes a
    custom theme.
  </li>
</ul>
<p>Applying a preset to a linked mode also unlinks it. To link it again, pick the workspace theme from the picker and save.</p>

> ℹ️ **Published forms update on their next publish**
> <p>
>     Saving a workspace theme changes the draft of every linked form right away. Respondents see the new look after each form is published
>     again, just like any other edit. Linked forms show <strong>Publish changes</strong> until then.
>   </p>

<h3 id="manage-workspace-themes">Rename or delete</h3>
<p>
  On a linked form, open the <strong>⋯</strong> menu next to the Theme picker. <strong>Rename</strong> changes the name everywhere the theme
  is used. <strong>Delete</strong> removes the theme; forms that used it keep their current look as a custom theme.
</p>

<h2 id="theme-sections">Theme controls</h2>

<p>
  Pick a preset or workspace theme, then fine-tune typography and colors. Each color describes a purpose rather than one component. For
  example, changing <strong>Text</strong> updates page text, question titles, field text, and option text together. Hover a color's name to
  see what it controls. A dot marks colors you have changed but not saved.
</p>

<h3 id="typography">Typography</h3>

<h3 id="colors">Colors</h3>

<p>Colors are grouped by where they show up on the form.</p>

<p>
  The Rating group also has <strong>Star size</strong>, the size of Rating stars in pixels, from 12 to 48.
</p>

<h2 id="fonts">Fonts</h2>
<p>formbase ships eleven font families. The font you choose under Typography applies to all text on the form.</p>

<h2 id="cover-logo">Cover image and logo</h2>
<p>
  The cover image and logo sit at the top of the canvas. You set them up directly on the canvas — not inside the theme panel. For a
  walkthrough, see <a href="/building-forms/understanding-the-editor#cover-logo">Understanding the editor → Cover and logo</a>.
</p>

<h2 id="dark-mode">Dark mode</h2>
<p>formbase supports dark mode in two places: the dashboard and published forms.</p>

<h3 id="dark-mode-dashboard">Dashboard</h3>
<p>Toggle dark mode from the user menu at the bottom of the sidebar. The setting follows your account across devices.</p>

<h3 id="dark-mode-published">Published forms</h3>
<p>Published forms follow the respondent's system preference by default. If their device is in dark mode, the form shows in dark mode.</p>

<h3 id="dark-mode-theming">Theming both modes</h3>
<p>
  If you only set up a light theme, the form uses formbase's default dark colors when dark mode is active. For full control, set up both
  color schemes using the light/dark toggle at the top of the theme panel.
</p>
<p>
  When you switch between Light and Dark in the theme panel, the dashboard switches to match. This lets you preview your theme in context
  while editing.
</p>

<h2 id="examples">Common theming patterns</h2>

<ul>
  <li>
    <strong>Match your brand</strong> — pick your brand font, set the Button color to your primary brand color, and upload your logo. Use a
    preset as a starting point, then save the result as a workspace theme so every form shares it.
  </li>
  <li>
    <strong>Dark-mode-first survey</strong> — force dark mode via the embed settings when sharing, then customize the dark color scheme for
    readability. Use a high-contrast accent for the active rating color so stars pop on dark backgrounds.
  </li>
  <li>
    <strong>Minimalist embed</strong> — set the Background color to match your website, hide the cover image and logo in the embed settings,
    use a quiet Border color, and drop corner radius to 0.
  </li>
  <li>
    <strong>Playful quiz</strong> — pick Comic Sans MS, push corner radius towards 32 for pill shapes, use a bright Selected color, and add
    a cover image from the Unsplash tab in the cover picker.
  </li>
</ul>

<h2 id="branding">Branding</h2>
<p>
  By default, published forms display a small formbase badge. Turn it off with <strong>Show formbase branding</strong> in{' '}
  <strong>Form settings → General</strong>. Removing the badge requires a Pro or Business plan — see{' '}
  <a href="/subscription-billing/plans-pricing">plans &amp; pricing</a>.
</p>

> 💡 **Test both light and dark modes before publishing**
> <p>
>     Preview your form with system dark mode enabled before publishing. Logo contrast and accent colors often need a tweak for the dark
>     variant — especially cover images and button colors that look great on a light background but wash out on a dark one.
>   </p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Language setting](/building-forms/language-setting) — Serve your form in any language
  - [File uploads & signatures](/building-forms/file-uploads-signatures) — Accept documents and e-signatures
  - [Bot protection](/building-forms/captcha-bot-protection) — Block spam with Cloudflare Turnstile
  - [Share links](/sharing-publishing/sharing-embedding) — Create and manage share link URLs
</div>


# Workspace themes

Save a look once and reuse it across every form in the workspace, so a brand change is one edit instead of one per form.

## Workspace themes

A named theme your whole workspace can share. Save your brand once, link forms to it, and change every linked form from one place.

<h2 id="what-it-is">What a workspace theme is</h2>

<p>
  <a href="/branding-domains/appearance-theming">Appearance &amp; theming</a> covers styling <em>one</em> form. A{' '}
  <strong>workspace theme</strong> is that same set of colors and typography, saved under a name so other forms can use it too. Link a form
  to it and the form follows the theme; change the theme and every linked form changes with it.
</p>

<p>
  A theme covers <strong>one color mode</strong>. Light and dark are separate themes, saved and linked separately, because the panel edits
  them separately. A form can follow a workspace theme for its light mode and stay custom for dark, or follow a different theme in each.
</p>

<h2 id="saving">Saving a theme</h2>

<p>
  Open the <strong>Theme</strong> panel on any form and style it the way you want. Then use <strong>Save as workspace theme</strong>, give
  it a name — the placeholder suggests something like <strong>Acme Brand</strong> — and choose <strong>Save theme</strong>.
</p>

<p>
  The theme is created from the mode you are currently editing, and that mode of this form is linked to it straight away. To cover both
  modes, switch to the other mode and save a second theme.
</p>

<h2 id="using">Using a theme on another form</h2>

<p>
  In any other form in the same workspace, open the <strong>Theme</strong> panel and pick the theme from the{' '}
  <strong>Workspace themes</strong> group at the top of the theme picker, above <strong>Presets</strong>. The form now shows a{' '}
  <strong>Linked</strong> badge for that mode.
</p>

<p>A theme belongs to the workspace that created it. You cannot link a form to a theme from a different workspace — formbase rejects it.</p>

<h2 id="changing">Changing a theme everywhere at once</h2>

<p>
  Edit a linked form's theme and formbase asks where the change should go, showing how far it reaches —{' '}
  <strong>"Acme Brand is used by 12 forms"</strong>:
</p>

<ul>
  <li>
    <strong>Save to Acme Brand</strong> — updates the workspace theme and copies the new colors into every linked form.
  </li>
  <li>
    <strong>Save for this form only</strong> — keeps the change local. That mode stops following the theme and becomes a custom theme for
    this form.
  </li>
</ul>

<p>
  While a linked form has edits you have not saved either way, it shows a <strong>Changed</strong> badge next to <strong>Linked</strong>.
</p>

> ⚠️ **Linked forms update on their next publish**
> <p>
>     Saving a workspace theme writes the new colors into each linked form's <strong>draft</strong>. A form that is already published keeps
>     serving its published look to respondents until you publish it again. Publish each affected form to put the new brand live.
>   </p>

<h2 id="renaming-deleting">Renaming and deleting</h2>

<p>
  The <strong>Workspace theme actions</strong> menu beside a saved theme offers <strong>Rename</strong> and <strong>Delete</strong>. A
  rename shows everywhere the theme is used.
</p>

<p>
  Deleting is safe for your forms' appearance: forms using the theme <strong>keep their current look but stop following it</strong>. Each
  linked mode becomes a custom theme on that form. Nothing turns default and nothing is restyled.
</p>

> ⚠️ **Deleting the workspace deletes its themes**
> <p>
>     Workspace themes belong to the workspace. Deleting the workspace deletes every theme in it along with its forms. There is no way to move
>     a theme between workspaces — save it again in the other workspace instead.
>   </p>

<h2 id="who-can">Who can manage them</h2>

<p>
  Any member of the workspace can save, rename, delete, and link workspace themes. Because saving reaches every linked form, agree with your
  team which theme is the brand before changing it.
</p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Appearance & theming](/branding-domains/appearance-theming) — Style a single form
  - [Custom domains](/branding-domains/custom-domains) — Serve forms from your own domain
  - [Version history](/building-forms/version-history) — Publishing and rolling back a form
</div>


# The Domains page

One workspace screen for sharing domains, bot-protection keys, and email sending domains.

## The Domains page

Where a workspace manages every branded domain it owns — the ones that serve forms, the ones that send email, and the Turnstile keys that protect them.

<h2 id="finding-it">Finding it</h2>

<p>
  Open <strong>Domains</strong> from the workspace sidebar. Its subtitle says what it covers:{' '}
  <em>Manage branded domains for form sharing and email sending</em>. The page holds three cards, in this order.
</p>

<h2 id="sharing-domains">1. Domains that serve forms</h2>

<p>
  The first card lists the domains your forms are served from, and lets you add one and see which forms use it. This is the setup side of{' '}
  <a href="/branding-domains/custom-domains">custom domains</a>, which walks through DNS records and verification.
</p>

<h2 id="bot-protection">2. Bot Protection</h2>

<p>
  The second card is <strong>Bot Protection</strong>, and it is the part most people miss. Its description is exact:{' '}
  <em>Provide your own Cloudflare Turnstile keys for bot protection on custom domain forms.</em>
</p>

<p>
  Forms on a formbase link are covered by formbase's own Turnstile keys. A form served from <strong>your</strong> domain is not — Turnstile
  keys are tied to the hostname, so formbase's keys do not apply there. Until you add your own keys, a form on a custom domain has no bot
  protection available to turn on.
</p>

<p>
  The card offers <strong>Get keys</strong> (to Cloudflare) and <strong>Read more</strong>. Paste the <strong>Site key</strong> and{' '}
  <strong>Secret key</strong> and choose <strong>Save keys</strong>. Once saved it reads <em>Keys configured — edit below to rotate</em>,
  and the secret field shows <em>Leave blank to keep existing</em>, so you can rotate the site key without re-entering the secret.{' '}
  <strong>Remove</strong> clears both.
</p>

> ℹ️ **Add a domain first**
> <p>
>     With no custom domain in the workspace the card shows <strong>Add a custom domain first</strong> and nothing to fill in. The keys only
>     ever apply to custom-domain forms, so there is nothing to configure until one exists.
>   </p>

<p>
  The effect shows up in a form's own settings. Under <strong>Bot protection (Turnstile)</strong>, a form on a custom domain without
  workspace keys reads <em>Configure Turnstile keys in Workspace Domains to enable bot protection</em> and links straight here. Once the
  keys are saved it reads <em>Using your workspace Turnstile keys for custom domain forms.</em> See{' '}
  <a href="/building-forms/captcha-bot-protection">Captcha &amp; bot protection</a>.
</p>

<h2 id="email-domains">3. Email sending domains</h2>

<p>
  The third card holds the domains formbase sends email from, so invitations, reminders and notifications come from your address rather than
  a formbase one. See <a href="/branding-domains/custom-email-domains">custom email domains</a> for the DNS setup.
</p>

> 💡 **Two different kinds of domain**
> <p>
>     A domain that <strong>serves</strong> forms and a domain that <strong>sends</strong> email are configured separately, with different DNS
>     records, on two different cards. Setting up one does not set up the other, even for the same domain name.
>   </p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Custom domains](/branding-domains/custom-domains) — Point your own domain at your forms
  - [Custom email domains](/branding-domains/custom-email-domains) — Send email from your own domain
  - [Captcha & bot protection](/building-forms/captcha-bot-protection) — Turn Turnstile on for a form
  - [Workspace themes](/branding-domains/workspace-themes) — Share one brand across every form
</div>


# Custom domains

Serve forms from your own domain instead of the default formbase URL.

> ✅ **Pro feature** — included in the Pro plan.


## Custom domains

Replace the default form.formbase.so URL with your own domain — like forms.yourcompany.com. Respondents see your brand in the address bar, and you get full control over social preview metadata. SSL is provisioned automatically.

<h2 id="setup">Set up a custom domain</h2>

<h2 id="dns-record">DNS record</h2>

<p>Create a single CNAME record at your DNS provider:</p>

<p>No TXT or A records are needed. formbase handles domain verification and security certificates automatically via the CNAME record.</p>

<h2 id="status">Domain status</h2>

<p>
  Status only changes when you ask for it. <strong>Check DNS</strong> on the domain card runs the check; there is no background poller, so a
  domain sits at Pending DNS until you click it again.
</p>

<p>
  On an active domain, click the <strong>link icon</strong> on the domain card to see which share links currently use that domain.
</p>

<h2 id="custom-slugs">Custom slugs</h2>

<p>
  Once a domain is active, each share link assigned to it gets a custom slug instead of the default 8-character code. For example:{' '}
  <code>forms.yourcompany.com/feedback</code> instead of <code>form.formbase.so/a1b2c3d4</code>.
</p>

<p>Slug rules:</p>
<ul>
  <li>3–64 characters</li>
  <li>Lowercase letters, numbers, and hyphens only</li>
  <li>Cannot start or end with a hyphen</li>
  <li>Must be unique per domain</li>
  <li>
    Seven slugs are reserved: <code>login</code>, <code>auth-callback</code>, <code>preview</code>, <code>payment</code>, <code>api</code>,{' '}
    <code>admin</code>, and <code>health</code>
  </li>
</ul>

<p>
  A link's original <code>form.formbase.so/&lt;code&gt;</code> URL keeps working after you assign a slug, and so does the same 8-character
  code on your own hostname. Nothing you already printed or emailed breaks.
</p>

<h2 id="social-preview">Social preview metadata</h2>

<p>
  Each domain has its own social preview settings — the title, description, image, and favicon that appear when someone shares a link on
  social media or messaging apps. Open the metadata editor by clicking the sliders icon on the domain card. A "Hide from search engines"
  toggle lets you add a noindex tag.
</p>

<p>
  Forms can also override the domain defaults with per-form metadata. The fallback order is: per-form settings → domain defaults → the
  form's cover image → generic formbase preview. This means you can set a branded baseline on the domain and only customize individual forms
  when needed.
</p>

<h2 id="limits">Limits</h2>

<ul>
  <li>
    The domain quota is a single pool shared between custom form domains and custom email domains — every domain you add counts toward the
    same cap
  </li>
  <li>
    Up to <strong>5 domains total</strong> per workspace on Pro, up to <strong>20 total</strong> on Business
  </li>
  <li>Bare root domains (e.g., yourcompany.com without a subdomain) are not supported — use a subdomain like forms.yourcompany.com</li>
  <li>
    Custom domains require a <strong>Pro or Business plan</strong>
  </li>
  <li>
    Bot protection on custom-domain forms requires your own <a href="/building-forms/captcha-bot-protection">Cloudflare Turnstile</a> keys —
    set them up on the same Domains page
  </li>
</ul>

> ℹ️ **Removing a domain**
> <p>
>     Deleting a custom domain unlinks it from all share links that use it. Those links fall back to the default form.formbase.so URL.
>     Respondents with bookmarks to the old custom domain URL will see an error, but the default share link URL continues to work.
>   </p>

<h2 id="downgrades">What happens if your plan lapses</h2>
<p>
  If your subscription ends or a payment fails, connected domains keep serving your forms for about <strong>60 days</strong>. After that,
  the domain disconnects and your share links fall back to the default formbase.so URLs — forms keep collecting, but bookmarks and printed
  QR codes pointing at the branded URL stop working. The grace-period emails name the exact cutoff date. Re-subscribe before that date and
  nothing changes; after it, add the domain again from the Domains page. See{' '}
  <a href="/subscription-billing/upgrading-downgrading#what-gets-deleted">upgrading &amp; downgrading</a>.
</p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Custom email domains](/branding-domains/custom-email-domains) — Send notifications from your own address
  - [Authentication gate](/sharing-publishing/authentication-gate) — Password protect or require login to submit
</div>


# Custom email domains

Send notifications from your own email domain.

> ✅ **Pro feature** — included in the Pro plan.


## Custom email domains

Notification emails to you and your respondents come from your domain (e.g. noreply@yourcompany.com) instead of noreply@formbase.so. Better deliverability, better branding.

<h2 id="what-it-improves">What it improves</h2>

- **Branding** — recipients see your domain in the From line
- **Deliverability** — emails from a domain you've authenticated land in inboxes more reliably
- **Reply handling** — if a respondent hits reply, the email goes to your domain's inbox instead of an unmonitored address

<h2 id="setup">Setting up</h2>

<h2 id="limits">Limits</h2>

The domain quota is a single pool shared with [custom form domains](/branding-domains/custom-domains). Pro allows **5 domains** in total and Business **20** — so on Pro, if you've added 3 form domains, you have 2 email domain slots left.

Without a custom email domain, notifications come from noreply@formbase.so. If you remove a verified domain later, forms using it fall back to noreply@formbase.so on their own.

> ⚠️ **DNS provider quirks**
> <p>
>     Some DNS providers add their own subdomain or refuse certain record types. If verification fails, check that the records appear exactly
>     as shown — no trailing dots added or trimmed.
>   </p>

<h2 id="next-steps">Next steps</h2>

<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Authentication gate](/sharing-publishing/authentication-gate) — Password protect or require login to submit
  - [Self notifications](/submissions-analytics/self-notifications) — Get emailed when submissions arrive
  - [Respondent notifications](/submissions-analytics/respondent-notifications) — Send confirmations from your domain
</div>