Back to blog

How to Build a Waitlist Page for Your Startup in 2026

Allen Jones
Allen Jones Posted on

You have an idea. Maybe you are still building it. Maybe it is ready, but you want to build an audience before you launch. Either way, the worst thing you can do is wait until launch day to start collecting emails.

A waitlist page solves that problem. It lets you validate demand, build excitement, and collect real email addresses from genuinely interested people before you write a single line of production code or spend a dollar on ads.

In this guide, you will build a complete, working waitlist page from scratch using plain HTML and CSS, with a form backend powered by Formgrid.dev. Every email collected goes straight to your inbox and your dashboard. No backend. No server. No complex setup.

By the end, you will have a live waitlist page you can deploy on GitHub Pages, Netlify, Cloudflare Pages, or any static host for free.

Image description

Why a Waitlist Page Matters Before You Launch

Most founders make the same mistake. They build for months, launch to the public, and discover nobody is waiting. The problem was not the product. It was the absence of a pre-launch audience.

A waitlist page does three things at once:

It validates demand. If people will not give you their email address, they will not give you their money either. A hundred signups before launch is proof that real humans care about what you are building.

It gives you a launch list. When you are ready to go live, you have a warm audience to email. That first wave of users does not come from cold outreach. It comes from people who already said yes.

It creates momentum. Showing "1,200 people on the waitlist" on your landing page is social proof that compounds. Every new visitor sees it and thinks, "maybe I should sign up too."

The good news: you do not need a fancy tool or a monthly subscription to build one. You need HTML, CSS, and a form backend.

What You Will Build

A clean, professional waitlist page with:

  • A compelling hero section with your headline and value proposition
  • A working email capture form
  • A success message after submission
  • Spam protection built in
  • Email notification to your inbox on every signup
  • A submission dashboard to track all your signups

Step 1: Create Your Formgrid Account

Head to https://formgrid.dev and sign up using Google or Email.

Image description

No credit card required. The free plan gives you 50 submissions per month, which is more than enough to validate your idea before you launch.

Step 2: Create a New Form

Once logged in, click New Form from your dashboard.

Image description

Name your form something descriptive, like:

  • "Waitlist Signups"
  • "Early Access"
  • "Pre-Launch Leads"

Click Create Form.

Step 3: Copy Your Endpoint URL

Go to the Overview tab of your new form and copy your unique endpoint URL.

Image description

It looks like this: https://formgrid.dev/api/f/your-form-id

This is the URL your waitlist form will submit data to. Keep it handy for the next step.

Step 4: Build Your Waitlist Page

Create a new file called index.html and paste this complete waitlist page. Replace YOUR_FORMGRID_ENDPOINT_URL with the endpoint you copied in Step 3, and update the headline, description, and colours to match your product.

<!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>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
    rel="stylesheet"
  />
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --brand: #1d4f3d;
      --brand-light: #e8f3ee;
      --text: #111827;
      --muted: #6b7280;
      --border: #e5e7eb;
      --bg: #f9fafb;
      --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
      --font-display: "Outfit", "Plus Jakarta Sans", sans-serif;
    }

    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* NAV */
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(229, 231, 235, 0.85);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 24px -4px rgba(17, 24, 39, 0.06);
    }

    .site-nav-inner {
      max-width: min(1100px, 94vw);
      margin: 0 auto;
      padding: 1rem clamp(1.25rem, 4vw, 2rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .logo {
      font-family: var(--font-sans);
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      text-decoration: none;
      transition: opacity 0.2s ease;
    }

    .logo:hover {
      opacity: 0.85;
    }

    .logo-mark {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 10px;
      background: linear-gradient(
        145deg,
        var(--brand) 0%,
        #163d30 100%
      );
      box-shadow: 0 2px 8px rgba(29, 79, 61, 0.25);
      flex-shrink: 0;
      position: relative;
    }

    .logo-mark::after {
      content: "";
      position: absolute;
      inset: 6px;
      border-radius: 4px;
      border: 2px solid rgba(255, 255, 255, 0.35);
      opacity: 0.9;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
    }

    .logo-name {
      line-height: 1.15;
      color: var(--text);
    }

    .logo-kicker {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .nav-cta {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--brand);
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(29, 79, 61, 0.2);
      background: var(--brand-light);
      transition: background 0.2s ease, border-color 0.2s ease;
      white-space: nowrap;
    }

    .nav-cta:hover {
      background: #dceee5;
      border-color: rgba(29, 79, 61, 0.35);
    }

    @media (max-width: 480px) {
      .logo-kicker {
        display: none;
      }

      .logo {
        font-size: 1.1rem;
      }

      .logo-mark {
        width: 2rem;
        height: 2rem;
      }

      .nav-cta {
        font-size: 0.8125rem;
        padding: 0.45rem 0.75rem;
      }
    }

    /* HERO — wide column, large type */
    .hero {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
      max-width: min(1100px, 94vw);
      margin: 0 auto;
      width: 100%;
    }

    .badge {
      display: inline-block;
      background: var(--brand-light);
      color: var(--brand);
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 10px 20px;
      border-radius: 999px;
      margin-bottom: clamp(1.25rem, 3.5vw, 2rem);
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(3.125rem, 9vw + 0.75rem, 5.75rem);
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.02;
      color: var(--text);
      margin-bottom: clamp(1.25rem, 3vw, 2rem);
      width: 100%;
    }

    .hero h1 .hero-accent {
      display: inline-block;
      font-weight: 800;
      color: var(--brand);
    }

    @supports (-webkit-background-clip: text) or (background-clip: text) {
      .hero h1 .hero-accent {
        background: linear-gradient(
          120deg,
          var(--brand) 0%,
          #2d7a5c 45%,
          #1a5c46 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }

    .subtitle {
      font-family: var(--font-sans);
      font-size: clamp(1.35rem, 2.8vw, 1.75rem);
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: -0.015em;
      color: var(--muted);
      max-width: min(48rem, 100%);
      margin: 0 auto clamp(2rem, 4vw, 3rem);
    }

    /* FORM */
    #waitlist-form {
      scroll-margin-top: 5.5rem;
    }

    .form-wrap {
      width: 100%;
      max-width: min(640px, 100%);
      margin: 0 auto;
    }

    .form-row {
      display: flex;
      gap: 10px;
    }

    .form-row input[type="email"] {
      flex: 1;
      padding: 16px 20px;
      font-size: 1.0625rem;
      border: 1px solid var(--border);
      border-radius: 12px;
      outline: none;
      background: #fff;
      transition: border-color 0.2s;
    }

    .form-row input[type="email"]:focus {
      border-color: var(--brand);
    }

    .form-row button {
      padding: 16px 28px;
      background: var(--brand);
      color: #fff;
      font-size: 1.0625rem;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.2s;
    }

    .form-row button:hover {
      opacity: 0.9;
    }

    .form-row button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .form-hint {
      font-size: 0.82rem;
      color: var(--muted);
      margin-top: 10px;
      text-align: center;
    }

    /* SUCCESS STATE */
    .success {
      display: none;
      background: var(--brand-light);
      border: 1px solid #cde3d8;
      border-radius: 14px;
      padding: 20px 24px;
      text-align: center;
    }

    .success h3 {
      color: var(--brand);
      margin-bottom: 6px;
    }

    .success p {
      color: var(--muted);
      font-size: 0.95rem;
    }

    /* SOCIAL PROOF */
    .proof {
      margin-top: clamp(2rem, 5vw, 3rem);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: clamp(0.95rem, 1.5vw, 1.05rem);
      color: var(--muted);
      max-width: min(52rem, 100%);
      margin-left: auto;
      margin-right: auto;
    }

    .proof-dot {
      width: 8px;
      height: 8px;
      background: var(--brand);
      border-radius: 50%;
    }

    /* FEATURES */
    .features {
      padding: 64px 24px;
      max-width: 960px;
      margin: 0 auto;
      width: 100%;
    }

    .features h2 {
      font-family: var(--font-display);
      text-align: center;
      font-size: clamp(1.5rem, 3vw, 1.85rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      margin-bottom: 40px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(
        auto-fit, minmax(240px, 1fr)
      );
      gap: 24px;
    }

    .feature-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
    }

    .feature-icon {
      width: 40px;
      height: 40px;
      background: var(--brand-light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .feature-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--brand);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .feature-card h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .feature-card p {
      font-size: 0.9rem;
      color: var(--muted);
    }

    /* FOOTER */
    footer {
      text-align: center;
      padding: 24px;
      font-size: 0.85rem;
      color: var(--muted);
      border-top: 1px solid var(--border);
    }

    @media (max-width: 560px) {
      .form-row {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

  <header class="site-nav" role="banner">
    <div class="site-nav-inner">
      <a href="#" class="logo" aria-label="YourProduct home">
        <span class="logo-mark" aria-hidden="true"></span>
        <span class="logo-text">
          <span class="logo-name">YourProduct</span>
          <span class="logo-kicker">Waitlist</span>
        </span>
      </a>
      <a href="#waitlist-form" class="nav-cta">Join waitlist</a>
    </div>
  </header>

  <section class="hero">

    <span class="badge">Coming Soon</span>

    <h1>
      The smarter way to<br />
      <span class="hero-accent">do the thing you do</span>
    </h1>

    <p class="subtitle">
      We are building something that solves 
      your problem better than anything else 
      out there. Join the waitlist and be 
      the first to know when we launch.
    </p>

    <div class="form-wrap">

      <form id="waitlist-form">

        <input 
          type="hidden" 
          name="_subject" 
          value="New Waitlist Signup" 
        />

        <!-- Honeypot spam protection -->
        <input 
          type="text" 
          name="_honey" 
          style="display:none" 
          tabindex="-1" 
          autocomplete="off" 
        />

        <div class="form-row">
          <input 
            type="email" 
            name="email" 
            placeholder="Enter your email address" 
            required 
          />
          <button type="submit" id="submit-btn">
            Join Waitlist
          </button>
        </div>

        <p class="form-hint">
          No spam. Unsubscribe anytime.
        </p>

      </form>

      <div class="success" id="success-msg">
        <h3>You are on the list!</h3>
        <p>
          We will email you the moment we launch. 
          Thank you for your interest.
        </p>
      </div>

    </div>

    <div class="proof">
      <span class="proof-dot"></span>
      <span>Join 500+ people already on the waitlist</span>
    </div>

  </section>

  <section class="features">
    <h2>Why people are excited</h2>
    <div class="features-grid">

      <div class="feature-card">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        </div>
        <h3>Benefit One</h3>
        <p>
          Describe the first key benefit of your 
          product in one or two sentences. 
          Be specific and outcome focused.
        </p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14">
            </polyline>
          </svg>
        </div>
        <h3>Benefit Two</h3>
        <p>
          Describe the second key benefit. 
          What problem does this solve? 
          How does it save time or money?
        </p>
      </div>

      <div class="feature-card">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z">
            </path>
          </svg>
        </div>
        <h3>Benefit Three</h3>
        <p>
          Describe the third benefit. 
          What makes your approach different 
          from everything else out there?
        </p>
      </div>

    </div>
  </section>

  <footer>
    Built with HTML and 
    <a href="https://formgrid.dev" 
       style="color: var(--brand);">
      Formgrid
    </a>
  </footer>

  <script>
    const form = document.getElementById(
      'waitlist-form'
    );
    const btn = document.getElementById(
      'submit-btn'
    );
    const successMsg = document.getElementById(
      'success-msg'
    );

    form.addEventListener('submit', async (e) => {
      e.preventDefault();

      btn.disabled = true;
      btn.textContent = 'Joining...';

      const data = new FormData(form);

      try {
        const res = await fetch(
          'YOUR_FORMGRID_ENDPOINT_URL',
          { method: 'POST', body: data }
        );

        if (res.ok) {
          form.style.display = 'none';
          successMsg.style.display = 'block';
        } else {
          btn.disabled = false;
          btn.textContent = 'Join Waitlist';
          alert(
            'Something went wrong. Please try again.'
          );
        }
      } catch (err) {
        btn.disabled = false;
        btn.textContent = 'Join Waitlist';
        alert(
          'Network error. Please check your connection.'
        );
      }
    });
  </script>

</body>
</html>

Replace these three things before you deploy:

YourProduct with your actual product name

The headline and subtitle with your real value proposition

YOUR_FORMGRID_ENDPOINT_URL with the endpoint URL from Step 3

Step 5: Email Notifications Are Already Set Up

Good news: you do not need to configure anything. Formgrid automatically sends every new signup to the email address you used to create your account.

The moment someone joins your waitlist, you will receive an email like this:

Image description

If you want signups sent to a different address, go to your form's Settings tab, find Email Notifications, and update it there.

Step 6: Deploy Your Waitlist Page for Free

You have several free options for hosting your waitlist page. All of them serve static HTML with no setup required.

GitHub Pages: Push your index.html to a GitHub repo and enable Pages in the repository settings. Your page goes live at username.github.io/repo-name.

Netlify: Drag and drop your index.html file onto netlify.com/drop and it goes live instantly at a random Netlify URL. Connect a custom domain in settings.

Cloudflare Pages: Connect your GitHub repo and Cloudflare deploys on every push. Fast, free, and global CDN included.

All three options are completely free for a static HTML page. Pick whichever you are most comfortable with.

Step 7: View and Manage Your Signups

Every signup is stored automatically in your Formgrid dashboard. Go to the Submissions tab to see everyone who has joined your waitlist.

Image description

You can search, filter, and export all your signups as a CSV file at any time. When you are ready to launch, export the list, and import it into your email tool of choice to send your launch announcement.

What Makes a Waitlist Page Convert

Based on the research behind this guide, here are the elements that separate high-converting waitlist pages from ones that collect zero signups:

A specific headline. "The future of productivity." converts nobody. "The form backend for developers who hate maintaining servers" converts the right people. Be specific about who it is for and what it does.

One clear action. Your only CTA should be the email field. No navigation links, no secondary buttons, no distractions. One page. One goal.

Social proof near the form. "Join 500 people already on the waitlist" creates FOMO and builds trust. Even if you are starting from zero, update this number as you grow.

A reason to sign up now. "Early access" or "be first to know" gives people a reason to act today instead of coming back later and forgetting.

Keep the form short. Email only for first contact. You can ask for more information in a follow-up survey after signing up. Every extra field reduces conversion.

Customising the Page for Your Brand

The template above uses a green brand colour defined as --brand: #1d4f3d in the CSS variables at the top. To match your own brand, just change that one value:

:root {
  --brand: #your-colour-here;
  --brand-light: #lighter-version-here;
}

Everything else on the page inherits those two values automatically. No need to hunt through the CSS changing colours one by one.

Final Thoughts

A waitlist page is not a nice-to-have. It is the difference between launching to silence and launching to a warm, engaged audience.

The page in this guide takes less than 30 minutes to set up. It costs nothing to host. And every signup goes straight to your inbox and your dashboard the moment it happens.

Stop waiting to start collecting. Build your waitlist today.

With Formgrid.dev you get:

✅ Working form with email capture in minutes
✅ Instant email notification on every signup
✅ Spam protection built in
✅ Submission dashboard to track all signups
✅ CSV export when you are ready to launch
✅ Free to start, no credit card required

👉 Start free at formgrid.dev