Centered Email Capture CTA Block for React

The email form, the code step and the confirmation are stacked in one grid cell. Only the active one is visible: the others are invisible, hidden from assistive technology with aria-hidden and made inert, so they can't be tabbed to or clicked. The cell is as tall as the tallest step, so nothing moves when the step changes and the footer line stays put.

Six slots in two groups of three, behind one logical field: typing fills them in order, Backspace goes back, and pasting a whole code fills all six at once. The sixth digit verifies the code by itself. Here any six digits are accepted and a timer (LATENCY) stands in for the request; replace it in verify with a call to your endpoint, and on a wrong code set the phase back to idle, clear the code and say so in the live region. The slots draw a single real input, which carries the "Six-digit code" name, so paste, autofill and the phone's one-time-code suggestion work as for any input. onComplete fires on the sixth digit.

After each action it follows the step: pressing "Start trial" moves focus to the first code slot, "Use a different email" to the email field, and a verified code to the confirmation, so a screen reader reads it from the start. It never moves on load. A single polite live region announces "Sending your code…", "We sent a six-digit code to…" and "Checking your code…", and is empty otherwise.

The form has noValidate and submit calls checkValidity(), which reads the field's type="email" and required. A missing or malformed address shows its message under the field, marks the input invalid and returns focus to it. Typing clears the message.

Two constants at the top, TRIAL_DAYS and MONTHLY_PRICE, feed the paragraph, the confirmation and the footer line, so changing one changes every place that mentions it. Replace the copy with your own terms: nothing here is a real offer.

Yes. The slots are 36 px wide below the sm breakpoint and 44 px above it, which keeps all six and the separator inside a 320 px screen. The email field and button stack, each the full width of the column, and the row of ticks wraps onto a second line.