Newsletter sign-up form

Visitors type their address and tick a consent checkbox that is never pre-ticked, with a note on how the address is used, how to unsubscribe and a link to the privacy policy, as the GDPR requires. The address is checked when leaving the field, never while typing; a common domain typo (gmial.com, hotmail.fe…) triggers a one-click correction. On submit, each error appears under its field and focus moves to the first field to fix; once the form is valid, a message asks to confirm the subscription (double opt-in). Accessibility: everything works with the keyboard, each message is tied to its field through aria-describedby and aria-invalid, the suggestion is announced by a live region, focus moves to the confirmation, contrast exceeds 4.5:1 in light and dark modes and the animation stops with prefers-reduced-motion. Plug submission into your mailing service: nwl:subscribe event in HTML, onSubscribe prop in React.