Minimal Contact Form Block for React

Leaving a field that has something in it checks it, so a half-typed email is flagged as you tab away, not after you try to send. A field you haven't touched, or left empty, waits for the submit. While a message is showing, typing re-checks it: it changes to the next problem or goes away the moment the field is valid. Typing never raises a new message by itself.

The textarea has maxLength set to 400, so it stops there, and the counter under it shows what's typed. The counter is the field's description, so a screen reader hears "12 / 400 characters" when the field takes focus, not on every key. In the last 40 characters it turns to the full text colour and weight. Change LIMIT to move the cap and SHORTEST for the shortest message the check accepts.

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the thanks. Replace that timer in submit with your own call (your inbox, a form endpoint or a help desk): details holds the name, email and message.

It names the visitor by first name and repeats the address the reply will go to, so a typo is easy to spot. It is a status region that takes focus when it appears, so a screen reader reads it at once. "Write another" brings back an empty form and puts focus on the heading.

The form is already one column, so it only narrows: the heading wraps and nothing scrolls sideways at 320 pixels. The heading and the form fade up once on load; with reduced motion they simply appear.