Card in Card Contact 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 your own call (your help desk, your inbox or a form endpoint): details holds the desk, name, email and message. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

Edit DESKS at the top of the file: each desk has an id, a label, a one-line blurb, an email, a phone number (and its tel: link) and hours. All three desks sit in one grid cell, so the card keeps the height of the tallest and nothing moves when you switch; the ones not showing are invisible and out of the tab order. Picking a desk is also announced politely to screen readers.

The textarea has maxLength set to 500 and the counter shows what is typed against it. The counter is part of the textarea's description, so a screen reader hears it when the field takes focus rather than on every key. In the last 50 characters it turns to the full text colour and weight. Change LIMIT to move the cap; SHORTEST is the shortest message the check accepts.

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 message of at least 10 characters. 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.

No. The addresses use the .example domain, which is reserved for examples, and the phone numbers are in the 555-0100 to 555-0199 range set aside for fiction. Replace them in DESKS. Phone numbers keep their order in a right-to-left layout.

The shell stacks: the form comes straight after the header, the desk's details after it. Name and email go one per row below sm, and the submit button goes full width. Nothing scrolls sideways at 320 pixels. The header and the card fade up once on load; with reduced motion they simply appear.