Contact form.

Reference composition: editorial card with a multi-column form, live preview pane, native validation chain, preventDefault submit, and form-associated participation across all six fields.

Live demo

multi-column · live preview · validation

Chapter 03 · Get in touch

Tell us about your project.

We read every message. Expect a reply within two working days — usually faster. All inputs are form-associated via ElementInternals; validation runs locally on submit.

Validation chain

six fields · custom messages

Field	Rules	Error message
`firstName` · `lastName`	required, min 2 chars	"Required." · "At least 2 characters."
`email`	required, format check	"Required — we reply by email." · "That doesn't look like a valid email."
`phone`	optional, digits/spaces/+/-/( )	"Use digits, spaces, +, -, ( )."
`message`	required, 20–600 chars, live counter	"Tell us what you're working on." · "A bit more — at least 20 characters."
`terms`	required checked	"Please accept the privacy policy."