ContactFormEditorial

Editorial contact form used on the live contact page: three required fields, nested optional detail sections and toast feedback on submit.

Status: stable. Group: form. Markdown version: /design-system/components/contact-form-editorial.md

When to use

The production contact page's editorial-styled form (uppercase labels). It renders three required core fields (name, email, message), then an optional project-details ExpandableSection with a nested extras section (phone, follow-up preferences, how you heard, attachment upload), a privacy note and the submit Button. Success and failure are reported through a toast, not an inline success view. Beyond its props, the form reads ?package= (prefills the package and opens project details), ?service= (adds the matching project type and opens project details) and the Donny prefill window event (adds a project type and writes the message). Shares submission flow with ContactForm; differs in voice and layout.

When not to use

The contract records no forbidden uses.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

ContactFormEditorial props
Prop	Type	Default	Description	Required
`calculatorSummary`	`string`	none	The pricing calculator choice the visitor arrived with, sent with the message.	No
`onSuccess`	`() => void`	none	Called after a successful submit, once the success toast is shown and the form is reset.	No
`onError`	`(error: Error) => void`	none	Called after a failed submit, once the failure is shown: on the refused fields when the server names them, otherwise as an error toast plus a note with the address to write to. A non-Error throw arrives as a synthesized Error("Unknown error").	No
`className`	`string`	none	Extra class on the form root.	No

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

ContactFormEditorial keyboard behaviour
Key	Behaviour
Tab	Moves through the fields, the ExpandableSection triggers, the privacy link and the submit button; the honeypot input is skipped (tabIndex -1)
General	On a submit with errors, focus moves to the first invalid required field (name, then email, then message)

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

ContactFormEditorial rules
Level	Rule	How it is checked
MUST	ARIA: The email typo suggestion is a role=status paragraph referenced by the email field's aria-describedby.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Submit success and failure are announced only through the toast; the form has no inline status region.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The honeypot wrapper is aria-hidden and its input has tabIndex -1.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not bypass design tokens or skip forced-colors verification at beta.	Release review; not machine-checked.

Install and import

In-repo only. ContactFormEditorial is not exported from @digitaltableteur/react, so there is no public import path.