Contact Form Footer Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your support inbox, help desk or form endpoint: email and message hold what was typed. Show the confirmation when the request succeeds and an error line in the form when it doesn't.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks that the email has an @ and a domain and that the message is not empty. 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.

It repeats the email address the reply will go to, so the visitor can spot a typo, and says how soon to expect it. It's a status region that takes focus when it appears, so a screen reader reads it at once; "Send another message" brings back an empty form and puts focus on its heading. The form and the confirmation share one space, so the footer does not change height.

Two rows to start, a minimum height of four rem, and it does not resize by hand: the footer stays compact. Raise min-h-16 on the Textarea for a roomier box.

Below lg the halves stack with a rule between them: the brand and the link groups (two to a row, three from sm), then the form card, then the legal band. The submit button goes full width. Nothing scrolls sideways at 320 pixels, and the footer has no entrance animation.