Forms that explain themselves.

Good forms tell people exactly what went wrong, next to the field, in words that screen readers announce. This demo runs entirely in your browser and sends nothing anywhere.

Why it matters

Every confusing form costs you enquiries.

A contact form is often the single most valuable thing on a local business site. If an error is only shown in red, appears far from the field or is never announced, people give up. Try entering a bad email and leaving the field.

What is under the hood

Each field has a visible label, and its error message is linked with aria-describedby.
Validation runs when you leave a field. Invalid fields get aria-invalid="true" and the message appears directly beneath.
The status line is a polite live region, so the result is announced without stealing focus.
The password meter is a native meter element, and the strength is also written in words so colour is never the only signal.
The real contact form on this site adds server-side validation, a hidden honeypot field and a Cloudflare Turnstile check.

Back to the lab