usability.cat
Issue Wiki

Email Capture Missing

Your coming-soon page has no way to collect emails. That's like putting up a poster for your new shop but forgetting to include the phone number.

What is this?

You have built a beautiful coming-soon page. Great domain name, slick logo, maybe even a countdown timer. But there is no email signup field anywhere. That is like putting up a gorgeous "Coming Soon" poster for your new restaurant — with no phone number, no address, and no way for interested people to find out when you actually open. Every visitor who lands on your page, gets excited, and then leaves has no way to come back. You just burned a lead.

Why it matters

  • For your visitors: They found your page — maybe through social media, a search, or word of mouth. They are genuinely interested. But there is nothing for them to do except bookmark the URL and hope they remember to check back. Most will not. You are asking them to do all the work of staying connected, and people are busy.
  • For your business: Pre-launch email lists are gold. They validate demand, give you a built-in audience for launch day, and let you build relationships before your product even exists. A coming-soon page without email capture is a wasted marketing asset. You are paying for the domain and hosting but getting zero return.
  • The standard: Every pre-launch or coming-soon page should have a prominently placed email signup form. One field (email), one button (something better than "Submit"), and a clear value proposition for why someone should hand over their address. Keep it above the fold.
Clear email capture
<section>
  <h1>Something amazing is coming</h1>
  <p>Be the first to know when we launch.</p>
  <form action="/api/subscribe" method="POST">
    <label for="email">Email address</label>
    <input
      id="email"
      type="email"
      name="email"
      required
      placeholder="you@example.com"
    />
    <button type="submit">Notify me</button>
  </form>
</section>
No way to stay connected
<section>
  <h1>Coming Soon</h1>
  <p>We're working on something awesome.</p>
  <!-- That's it. No email form. No social links.
       Visitor leaves, never comes back. -->
</section>

How to fix it

React / Next.js

Here is a complete email capture component. Swap out the API endpoint with your own (Mailchimp, ConvertKit, a Convex action, or even a simple Google Form):

"use client";

import { useState } from "react";

function EmailCapture() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");

    try {
      const res = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });

      if (res.ok) {
        setStatus("success");
        setEmail("");
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <p className="text-center text-green-400">
        You are on the list! We will let you know when we launch.
      </p>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-2">
      <label htmlFor="email" className="sr-only">
        Email address
      </label>
      <input
        id="email"
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@example.com"
        className="flex-1 rounded border px-3 py-2"
      />
      <button
        type="submit"
        disabled={status === "loading"}
        className="rounded bg-white px-4 py-2 font-medium text-black"
      >
        {status === "loading" ? "Joining..." : "Notify me"}
      </button>
      {status === "error" && (
        <p className="text-sm text-red-400">Something went wrong. Try again?</p>
      )}
    </form>
  );
}

Plain HTML

<section style="max-width: 32rem; margin: 4rem auto; text-align: center;">
  <h1>Something amazing is coming</h1>
  <p>Be the first to know when we launch.</p>

  <form
    action="https://your-email-service.com/subscribe"
    method="POST"
    style="display: flex; gap: 0.5rem; margin-top: 1.5rem;"
  >
    <label for="email" class="sr-only">Email address</label>
    <input
      id="email"
      type="email"
      name="email"
      required
      placeholder="you@example.com"
      style="flex: 1; padding: 0.5rem; border-radius: 0.375rem; border: 1px solid #ccc;"
    />
    <button
      type="submit"
      style="padding: 0.5rem 1rem; background: #000; color: #fff; border: none; border-radius: 0.375rem;"
    >
      Notify me
    </button>
  </form>
</section>
High impactforms~2 paws

A coming-soon page without email capture is a missed opportunity the cat cannot forgive. You already have their attention — do not waste it. Add the form, collect the emails, launch to an audience instead of into the void.

How the cat scores this

The cat identifies pages that appear to be pre-launch, coming-soon, or under-construction (based on headings, content, and meta tags). If such a page has no <form> with an email input, no embedded signup widget, and no link to an external signup, the cat flags it. The cat also checks that any email form actually has a submit button and a working action — a form with no button or a dummy action="#" gets flagged too.

Further reading

On this page