Live Thread Drawing Contact Block for React

The drawing reads the same details state as the form: the first bubble shows the name and message as typed (up to three lines, with the rest cut off), the avatar shows the name's initials, and the reply bubble uses the first name. Empty, it shows placeholder lines. The drawing is decorative and hidden from assistive technology, so a screen reader doesn't hear it change on every key; the form is what a visitor reads.

The drawing needs no image file, so there is nothing to host, size or credit, and it follows your theme in light and dark. It is also specific to the form: a photograph beside a form tells you nothing, but a thread that fills in as you type shows exactly what the other side will see.

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation and marks the bubble "Delivered". Replace that timer in submit with your own call: details holds the name, email and message.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a name, an email address with an @ and a domain, and a question. Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby that points to the message, and focus moves to the first one. Typing in a field clears its message.

Below lg the parts stack: the header, the form, then the drawing under a hairline. On a phone the drawing shrinks to its two bubbles: the window's title bar and the date line are dropped. Nothing scrolls sideways at 320 pixels, and the submit button goes full width.