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
LedgerhouseServices
vaultlineown4 sections
BenchlistDirectory
directoryown5 sections
VanrosterSaaS
callboardown4 sections
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
Fields that matter
| Section type | Field | Type | Bounds | Refused as |
|---|---|---|---|---|
| cta-form | head.title ? | string ≤72 | 1–72 | cta-form.head.title |
| cta-form | action | string ≤160 | 1–160 | cta-form.action |
| cta-form | fields | 1–8 × object | 1–8 | cta-form.fields |
| cta-form | fields[].label | string ≤16 | 1–16 | cta-form.fields.label |
| cta-form | fields[].options ? | 0–12 × string ≤32 | ≤12 | cta-form.fields.options |
| cta-form | submit | string ≤24 | 1–24 | cta-form.submit |
| cta-form | note ? | string ≤80 | 1–80 | cta-form.note |
Every field of cta-form
| Field | Type | Req | Bounds | Refusal |
|---|---|---|---|---|
head | object | yes | — | cta-form.head |
head.eyebrow | string ≤28 | yes | 1–28 | cta-form.head.eyebrow |
head.title | string ≤72 | 1–72 | cta-form.head.title | |
head.lede | string ≤300 | 1–300 | cta-form.head.lede | |
head.max | string (pattern) | — | ||
head.ledeMax | string (pattern) | — | ||
head.balance | boolean | — | ||
head.scale | "compact" | "large" | — | ||
head.tag | string ≤8 | 1–8 | cta-form.head.tag | |
head.layout | "split" | — | ||
action | string ≤160 | yes | 1–160 | cta-form.action |
fields | 1–8 × object | yes | 1–8 | cta-form.fields |
fields[].name | string (pattern) | yes | — | |
fields[].type | "text" | "email" | "select" | "textarea" | yes | — | |
fields[].label | string ≤16 | yes | 1–16 | cta-form.fields.label |
fields[].placeholder | string ≤32 | 1–32 | cta-form.fields.placeholder | |
fields[].options | 0–12 × string ≤32 | ≤12 | cta-form.fields.options | |
submit | string ≤24 | yes | 1–24 | cta-form.submit |
note | string ≤80 | 1–80 | cta-form.note |
Starter record
pages/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."
]
}
}
]
}