Contact Form
The /contact brief form: five fields, three required. Name and email, the need as a native select (pre-selected from ?need=), an optional website link and an optional note. Choosing UX audit reveals the audit-format chips.
Live Preview
View Full Version
Structure
Need select and audit-format chips — .need-chip
"What do you need?" is a native select (one closed control instead of two rows of chips), with the field styling and a chevron. The audit-format row is pills over native radios (sr-only), so arrow keys, the browser's required check and the submitted label stay native. Checked state via :has(input:checked); focus ring via :has(input:focus-visible). Colour on the fast-effects curve, the press pops on fast-spatial. .need-chip-sm sizes them. The form sits in .contact-form-card on /contact (the cool band ground with a faint accent edge).
Submission
Server action submitContactForm emails the brief via Gmail and redirects to /thank-you. The honeypot is company_url; website is the real link field, normalised to https.