Branding

Motivation Form renders forms as branded public pages. You control the visual appearance through the branding block in your form's .md frontmatter.

Configuration

branding:
  logo: https://cdn.example.com/logo.png
  primary_color: "#0f172a"

Property	Type	Description
`logo`	URL string	Public URL to your logo. Displayed top-left of the form page. You host the file — Motivation Form never stores or proxies it. If omitted, the Motivation Form wordmark is shown as default branding.
`primary_color`	Hex string	Brand color applied to the submit button, focus rings, and active state for radio/checkbox. Must be a 6-digit hex color (e.g. `#0f172a`). Default: `#0f172a`.

Both properties are optional. If omitted, the form renders with Motivation Form's default styling.

Logo

Placement

Every form page has two logo slots:

Slot	What it shows	When
Top-left (header)	Your `branding.logo` URL	If you set `branding.logo`
Top-left (header)	Motivation Form wordmark	If you omit `branding.logo`
Bottom-center (footer)	Motivation Form wordmark	Always — alongside the "powered by Motivation Form (form.gold)" attribution

The footer wordmark is part of the platform attribution and is shown on every form page regardless of your branding settings.

branding.logo must be a public HTTPS URL that points directly at the image file. Motivation Form does not upload, store, or cache your logo — the browser fetches it straight from the URL you provide every time the form is rendered.

branding:
  logo: https://cdn.acme.com/logo-dark.svg

Common places to host the file:

A CDN (Cloudflare, Bunny, AWS CloudFront)
Object storage with public-read (S3, Cloudflare R2, Supabase Storage)
A static asset in your marketing site (e.g. https://acme.com/assets/logo.png)

Plain http:// URLs are auto-upgraded to https:// at render time so the form page does not produce mixed-content warnings.

Dimensions and format

The header logo slot displays the image at 40px tall and lets the width scale automatically.

Format	Notes
SVG	Recommended. Scales crisply at any size and any pixel density.
PNG	Use a transparent background. Provide at least 2× the displayed height (so ≥ 80px tall) for retina displays. A natural width up to ~400px is fine — the renderer scales it down.
JPG	Allowed, but a solid background will not blend with the form page. Use only if your logo is rectangular and solid-colored on purpose.

The natural aspect ratio is preserved. Wordmark-style logos (wide) and square marks both render correctly — only the height is constrained.

Tips for a clean result:

Transparent backgrounds blend with both the light and dark form themes.
Trim excess whitespace so the logo doesn't appear smaller than the surrounding type.
For dark form themes (branding.theme: default-dark), upload a light-colored or white-stroke variant so the logo stays legible.

Runtime theme toggle

Every form page also exposes a small sun/moon toggle in the top-right corner. Respondents can switch between light and dark themes while filling the form; the choice is stored in their browser's localStorage so it sticks across forms. The default starting theme is whatever you set in branding.theme (or default-light if unset).

The Motivation Form wordmark in the footer adapts automatically to the active theme. If you supply your own branding.logo, the same URL is used in both themes — provide a logo that reads well on light and dark backgrounds, or accept that respondents who toggle may see your logo on the off-mode background.

Primary color

The primary color is used for:

Submit button background
Input focus ring
Selected state for radio buttons and checkboxes
Step progress indicator (multi-step forms)

Choose a color with sufficient contrast against white (#ffffff) for accessibility. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text.

branding:
  primary_color: "#1d4ed8"   # Blue

Multi-step layout

Multi-step forms are controlled by the step property on each field — not by the branding block. See Field types — Multi-step forms for the full spec.

When steps are defined, the form page renders:

A step progress indicator at the top (using primary_color)
Only the fields for the current step
"Back" and "Next" buttons between steps
A final "Submit" button on the last step

The form validates required fields before allowing the user to advance to the next step.

Full example

---
title: Campaign Brief
slug: campaign-brief
branding:
  logo: https://cdn.acme.com/logo.svg
  primary_color: "#7c3aed"
notifications:
  email:
    - campaigns@acme.com
  subject: "New campaign brief from {field:company}"
humanness: true
fields:
  - id: company
    type: text
    label: Company name
    required: true
    step: 1
  - id: contact_email
    type: email
    label: Contact email
    required: true
    step: 1
  - id: campaign_type
    type: radio
    label: Campaign type
    options: [Brand awareness, Product launch, Partnership]
    step: 2
  - id: budget
    type: number
    label: Budget (USD)
    step: 2
  - id: brief
    type: textarea
    label: Campaign brief
    required: true
    step: 3
  - id: logo
    type: image
    label: Brand logo (optional)
    accept: [image/png, image/svg+xml]
    max_mb: 5
    step: 3
---

Submit your campaign parameters. We review all briefs within **48 hours** and follow up by email.