Newsletter Form V06

Author: Colorlib
Released: September 2026
License: CC BY 3.0
A centred signup card for a weekly newsletter with an optional first name and a required email field, topped by a three-step progress bar. After submitting, the card switches to a check-your-inbox state with an envelope illustration, the email echoed back and numbered instructions for confirming. A resend button waits out a configurable cooldown with a visible countdown, and a change-email link returns to the form with the address pre-filled.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 251 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Three-step progress indicator with aria-current
- Inline email validation shown only after interaction
- Check-your-inbox state that receives focus and echoes the email
- Resend button with countdown set by data-cooldown
- Cooldown start and end announced politely, not every second
- Change-email link restores the form with the address selected

