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"

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

Logo

The logo appears above the form title on the public page. Tips:

• Use a URL to a CDN-hosted or publicly accessible image — not a local file path
• SVG scales cleanly at any size
• PNG should be at least 2× the displayed width for retina displays
• Transparent backgrounds work best on the white form page

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

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:

1. A step progress indicator at the top (using primary_color)
2. Only the fields for the current step
3. "Back" and "Next" buttons between steps
4. 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.