Waitlist Signup — Early Access Form HTML CSS JS

A waitlist does two jobs before you've launched: it captures demand as a list of warm leads, and — done well — it turns each signup into a promoter through referral mechanics. This snippet builds the complete modern waitlist in plain HTML, CSS, and vanilla JavaScript: a signup card with social proof and email validation, then a confirmation that reveals the user's queue position and a referral link they can share to move up the line.

Social proof before the ask

Above the email field sits a small stack of avatars and a live count ("2,847 people waiting"). Showing that others have already joined is one of the most effective ways to increase signups — a waitlist nobody's on feels risky to join, while one with thousands already waiting signals the product is worth waiting for. The avatar stack uses overlapping circles (the standard "people" motif) built purely with CSS gradients, so it needs no images.

Validation before commitment

Submitting validates the email against a pragmatic regex and shows an inline error for an invalid address before anything else happens — there's no point sending someone to the confirmation state with a typo'd email that can never be contacted. The validation is intentionally simple (catching the common mistakes, not chasing full RFC compliance), which is the right trade-off for a low-friction signup.

The position reveal — why it works

On success, the card swaps to a confirmation showing "You're #1,284 in line." A concrete position transforms an abstract "you're signed up" into something the user has a stake in — and crucially, sets up the referral mechanic. Seeing a number they'd like to lower is exactly what motivates sharing, far more than a generic "tell your friends" plea. The position should come from your backend (the demo simulates it); it's the anchor the whole referral loop hangs on.

Referral sharing to skip ahead

Below the position is a unique referral link and a copy button, framed with the incentive: "Each friend who joins moves you up." This is the viral loop that powers launches like Robinhood and Superhuman — every signup is handed a personal stake and a tool to recruit others, turning a static lead list into compounding growth. The copy button uses the modern navigator.clipboard API with a graceful execCommand fallback for older browsers, and confirms with a green "✓ Copied" state so the user knows it worked.

Two states, one card

The signup form and the confirmation are two states of one card, toggled with the hidden attribute — keeping the user anchored in place rather than navigating away, which matters for a flow whose whole point is to immediately hand them the referral tool. In production the submit handler is where you'd POST the email to your waitlist service (which returns the real position and referral code); the demo generates both client-side so the full flow is visible without a backend.

Honest, portable, and adaptable

The referral code here is derived from the email for demonstration, but a real implementation must generate it server-side and track referrals authoritatively — client-side codes can be forged. The component is otherwise self-contained and easy to re-theme: swap the product name, the social-proof count, and the accent color, and it fits any pre-launch product, beta program, or early-access drop.