Subscribe or Write Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. In submit, mode says which form was sent: send details.email and details.frequency to your mailing list for Subscribe, or details to your inbox for Write to us. The confirmation doesn't claim a confirmation email was sent.

The two forms sit in one grid cell, so the cell is as tall as the taller one (Write to us) and the other fades out inside it. The form that isn't showing is inert and invisible, so keyboard users and screen readers never reach it. Subscribe fills the extra room with what each issue holds.

The label above it names the select's button for screen readers. The select's trigger takes the id, and the label points to it with htmlFor.

Both forms have noValidate, so the browser's bubbles stay away. On submit, problems checks the form that shows: an email with an @ and a domain for Subscribe; a name, an email and a message for Write to us. Typing in a field clears its message, and switching forms clears all of them.

For Subscribe it names the email and how often the issue goes out; for Write to us it thanks the visitor by first name and repeats the email. It's a status region that takes focus when it appears, so a screen reader reads it at once, and its button ("Use another email" or "Write another message") brings the forms back and focuses the first field.

The shell sits inset from the rails so its corner marks stay inside them. The switch and the fields fill the card, the buttons go full width, and the card is shorter than a screen.