Free Waitlist Form Template — Copy-Paste HTML Code

Q: Is this waitlist form template free?

Yes, completely free. Copy, modify, and use it however you like. The only cost is the FormBackend service for receiving and managing waitlist signups, which starts with a free tier.

Q: How do I collect and store waitlist signups?

FormBackend stores every signup in your dashboard and emails you when new people join. You can also push signups to Google Sheets or Mailchimp so your waitlist is ready when you launch.

Q: Can I send a confirmation email to people who join?

Yes. FormBackend can send an automatic confirmation email the moment someone joins your waitlist, so they know they're on the list.

Q: Can I show a thank-you message or referral link after signup?

Yes. Use FormBackend's custom redirect to send new signups to a thank-you page or a referral page after they join.

Q: Does this work on a pre-launch landing page?

Absolutely. It's plain HTML and CSS with no dependencies, so it drops into any landing page builder, static site, Webflow, or Framer page.

A waitlist form lets you build demand before you launch and collect a ready audience to email on day one. In this guide you’ll get a production-ready HTML waitlist form template you can copy and paste into any pre-launch page in minutes. It captures the essentials — email and optional context — with modern styling, validation, and seamless delivery through FormBackend.

Complete Waitlist Form Code

Here’s a fully-styled, ready-to-use waitlist form you can copy into any HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Join the Waitlist</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
            min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .container { background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 44px; max-width: 440px; width: 100%; text-align: center; }
        h1 { font-size: 28px; margin-bottom: 10px; color: #1a202c; }
        .form-subtitle { font-size: 15px; color: #718096; margin-bottom: 28px; }
        .form-group { margin-bottom: 16px; text-align: left; }
        label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #2d3748; }
        input, select { width: 100%; padding: 13px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 15px; font-family: inherit; transition: all 0.3s ease; }
        input:focus, select:focus { outline: none; border-color: #805ad5; box-shadow: 0 0 0 3px rgba(128,90,213,0.15); }
        button { width: 100%; padding: 14px 20px; background: #805ad5; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 6px; }
        button:hover { background: #6b46c1; }
        .count { font-size: 13px; color: #a0aec0; margin-top: 14px; }
        .success-message, .error-message { display: none; padding: 14px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
        .success-message { background: #c6f6d5; color: #22543d; }
        .error-message { background: #fed7d7; color: #742a2a; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Be the first to know</h1>
        <p class="form-subtitle">Join the waitlist and we'll email you the moment we launch.</p>

        <div class="success-message" id="successMessage">You're on the list! We'll be in touch soon.</div>
        <div class="error-message" id="errorMessage">There was an issue. Please try again.</div>

        <form id="waitlistForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-group">
                <label for="email" class="required">Email Address</label>
                <input type="email" id="email" name="email" placeholder="you@example.com" required>
            </div>
            <div class="form-group">
                <label for="name">Name (Optional)</label>
                <input type="text" id="name" name="name">
            </div>
            <div class="form-group">
                <label for="referral">How did you hear about us?</label>
                <select id="referral" name="referral">
                    <option value="">Select...</option>
                    <option value="Twitter/X">Twitter/X</option>
                    <option value="Friend">Friend</option>
                    <option value="Search">Search</option>
                    <option value="Other">Other</option>
                </select>
            </div>

            <button type="submit">Join the Waitlist</button>
            <p class="count">Join hundreds already waiting.</p>
        </form>
    </div>

    <script>
        const form = document.getElementById('waitlistForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        form.addEventListener('submit', function(e) {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            const email = document.getElementById('email').value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailRegex.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

How to Use This Template

Step 1: Copy the Code

Copy the entire HTML above and save it as waitlist-form.html. Drop it onto your pre-launch page, embed it, or test locally first.

Step 2: Create a FormBackend Account

Create a free account at FormBackend, where every waitlist signup will be received and stored.

Step 3: Update the Form Action URL

Replace YOUR_FORM_ID with your real FormBackend form ID so the action reads https://www.formbackend.com/f/abc123xyz.

Your waitlist form is now live.

Waitlist Form Variations

Variation 1: Email-Only Waitlist

The lowest-friction version for maximum signups:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="email" name="email" placeholder="Enter your email" required>
    <button type="submit">Join the Waitlist</button>
</form>

Variation 2: Waitlist with Use-Case Segmentation

Learn who’s signing up so you can prioritize:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="email" name="email" placeholder="Email" required>
    <select name="role" required>
        <option value="">I'm a...</option>
        <option value="Developer">Developer</option>
        <option value="Designer">Designer</option>
        <option value="Founder">Founder</option>
        <option value="Other">Other</option>
    </select>
    <button type="submit">Request Early Access</button>
</form>

Variation 3: Beta Waitlist with Company Field

For B2B early access:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Work email" required>
    <input type="text" name="company" placeholder="Company">
    <button type="submit">Get Early Access</button>
</form>

How to Customize This Template

Match your brand: Change the button background: #805ad5; and the dark body gradient to your colors.

Add or remove fields: Keep it to just email for the highest conversion, or add fields to segment signups.

Show social proof: Edit the .count text to show how many people have joined.

Confirmation + referral: Use FormBackend’s auto-reply to confirm signup, and a custom redirect to send people to a referral page.

Adjust width: Change max-width: 440px; to fit your layout.

Integration with FormBackend

FormBackend lets you manage your waitlist without a backend. Once signups arrive, you can:

See your entire waitlist in one organized dashboard
Get an email notification for each new signup
Send an automatic confirmation email
Push signups to Mailchimp or Google Sheets so your list is launch-ready
Export your waitlist as CSV

For more on integrations and managing submissions, see the FormBackend documentation.

Frequently Asked Questions

Is this waitlist form template free? Yes, completely free. The only cost is FormBackend for receiving and managing signups, which starts with a free tier.

How do I collect and store waitlist signups? FormBackend stores every signup and emails you when people join. You can also push signups to Google Sheets or Mailchimp.

Can I send a confirmation email to people who join? Yes. FormBackend can send an automatic confirmation the moment someone joins.

How do I keep bots off my waitlist? FormBackend includes spam protection on every plan and supports Cloudflare Turnstile, reCAPTCHA, and hCaptcha.

Can I show a thank-you message or referral link after signup? Yes. Use FormBackend’s custom redirect to send signups to a thank-you or referral page.

Does this work on a pre-launch landing page? Absolutely. It’s plain HTML and CSS with no dependencies.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Newsletter Signup Form Template — Grow your email list
Lead Capture Form Template — Turn visitors into qualified leads
Demo Request Form Template — Let prospects request a product demo
Contact Form Template — Collect name, email, and message

Need a custom form? Use our HTML form generator to build one visually.