Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

contact

A form, its fields and the note beside it, with a sent page to land on.

Theme

6 pages in 6 Businesses name contact in this build.

Use contact for any page whose job is a form: contact, intake, a listing submission. The cta-form holds one to eight fields and posts to its action; the page a sender lands on is its own record. A static host answers no post, so point the action at a handler the Business runs.

Sections in order

Ledgerhouse /intake

Vanroster /contact, Diffkeel /contact

Harbor tides /contact

Fields that matter

Section typeFieldTypeBoundsRefused as
cta-formhead.title ?string ≤721–72cta-form.head.title
cta-formactionstring ≤1601–160cta-form.action
cta-formfields1–8 × object1–8cta-form.fields
cta-formfields[].labelstring ≤161–16cta-form.fields.label
cta-formfields[].options ?0–12 × string ≤32≤12cta-form.fields.options
cta-formsubmitstring ≤241–24cta-form.submit
cta-formnote ?string ≤801–80cta-form.note
Every field of cta-form
FieldTypeReqBoundsRefusal
head.eyebrowstring ≤28yes1–28cta-form.head.eyebrow
head.titlestring ≤721–72cta-form.head.title
head.ledestring ≤3001–300cta-form.head.lede
head.maxstring (pattern)—
head.ledeMaxstring (pattern)—
head.balanceboolean—
head.scale"compact" | "large"—
head.tagstring ≤81–8cta-form.head.tag
head.layout"split"—
actionstring ≤160yes1–160cta-form.action
fields1–8 × objectyes1–8cta-form.fields
fields[].namestring (pattern)yes—
fields[].type"text" | "email" | "select" | "textarea"yes—
fields[].labelstring ≤16yes1–16cta-form.fields.label
fields[].placeholderstring ≤321–32cta-form.fields.placeholder
fields[].options0–12 × string ≤32≤12cta-form.fields.options
submitstring ≤24yes1–24cta-form.submit
notestring ≤801–80cta-form.note

Starter record

Ledgerhousepages/ledgerhouse/intake.json3.8 KB contact.json
{
  "$schema": "https://next.mdxui.dev/schema.json",
  "theme": "vaultline",
  "frame": "none",
  "template": "contact",
  "title": "Intake · Ledgerhouse",
  "description": "Eight questions. A partner replies within two working days with a fixed fee and a start date.",
  "sections": [
    {
      "kind": "nav",
      "shell": {"inset":"bleed","density":"none","surface":"glass","sticky":true},
      "block": {
        "type": "nav",
        "menu": "none",
        "brand": {"href":"/","text":"Ledgerhouse","mark":"landmark"},
        "links": [["/services","Services"],["/pricing","Fees"],["/about","About"]],
        "cta": {"href":"/intake","label":"Start intake"}
      }
    },
    {
      "kind": "section",
      "shell": {"inset":"contained","density":"section"},
      "block": {
        "type": "cta-form",
        "head": {
          "eyebrow": "Intake",
          "title": "Eight answers, one fixed fee.",
          "lede": "A partner reads every intake. The reply names a fee and a start date within two working days."
        },
        "action": "/intake/sent",
        "fields": [
          {"name":"name","type":"text","label":"Name"},
          {"name":"email","type":"email","label":"Email","placeholder":"you@business.example"},
          {"name":"business","type":"text","label":"Business name"},
          {
            "name": "entity",
            "type": "select",
            "label": "Entity",
            "options": ["Sole owner","Partnership","Corporation","Not sure"]
          },
          {
            "name": "software",
            "type": "select",
            "label": "Software",
            "options": ["A cloud package","A desktop package","Spreadsheets","None yet"]
          },
          {
            "name": "volume",
            "type": "select",
            "label": "Transactions",
            "options": ["Under 150 a month","150 to 400 a month","400 to 1,000 a month","Over 1,000 a month"]
          },
          {
            "name": "behind",
            "type": "select",
            "label": "Books behind",
            "options": ["Up to date","1 to 3 months","4 to 12 months","More than a year"]
          },
          {
            "name": "notes",
            "type": "textarea",
            "label": "Anything else",
            "placeholder": "Payroll, owners, deadlines"
          }
        ],
        "submit": "Send intake",
        "note": "A partner replies within two working days."
      }
    },
    {
      "kind": "section",
      "shell": {"inset":"contained","density":"section"},
      "block": {
        "type": "steps",
        "head": {"eyebrow":"After you send","title":"Three steps to a first close."},
        "steps": ["A partner reads the answers","A fixed fee and date","The engagement letter, signed"]
      }
    },
    {
      "kind": "footer",
      "shell": {"inset":"contained","density":"footer"},
      "block": {
        "type": "footer",
        "layout": "columns",
        "brand": {"href":"/","text":"Ledgerhouse","mark":"landmark"},
        "blurb": "Bookkeeping and tax for small businesses, by two partners and no handoffs.",
        "columns": [
          {
            "title": "The firm",
            "links": [
              ["/services","Services"],
              ["/services/monthly-close","Monthly close"],
              ["/pricing","Fees"],
              ["/about","About"]
            ]
          },
          {"title":"Clients","links":[["/intake","Intake"],["/terms","Terms of engagement"]]},
          {
            "title": "For agents",
            "links": [["/records.zip","Site records (.zip)"],["/services/monthly-close","What a close report holds"]]
          }
        ],
        "note": [
          "Ledgerhouse is a worked example on mdxui.dev, not a customer.",
          "Rendered by @mdxui/site. Forms here do not send."
        ]
      }
    }
  ]
}

Other Templates

Sidework
blog

5 pages · 4 of 6 Businesses

Sidework
post

4 pages · 4 of 6 Businesses

Ledgerhouse
article

24 pages · 6 of 6 Businesses

On this page