Skip to content

Components

The Email-Capture Hero — One Field at the Moment of Peak Interest

Email Field + Specific Button Verb, Inline Success, and No Name Field Ever
Written by Aiden Wood Founder and Lead Design Engineer
📧 🦸 🎯

Interest peaks in the first five seconds on the page and decays from there — which is exactly why the waitlist/newsletter/early-access form belongs in the hero, not three scrolls down past the feature grid. The email-capture hero converts because it compresses the whole funnel into the moment attention is highest.

Velocity X's hero-email-capture is the shape: headline, subhead, one field, one button, proof line underneath. Pure Astro, so the hero costs nothing — only the submit touches JavaScript.

The Money Pattern

<form class="mt-7 flex max-w-md gap-2" method="post" action="/api/subscribe">
  <input type="email" name="email" required
         autocomplete="email" inputmode="email"
         placeholder="you@company.com"
         aria-label="Email address"
         class="min-w-0 flex-1 rounded-lg border px-4 py-3" />
  <button class="shrink-0 rounded-lg bg-ink px-5 py-3 font-semibold text-white">
    Get early access
  </button>
</form>
<p class="mt-2 text-xs text-neutral-500">Join 1,400 developers. No spam, unsubscribe anytime.</p>

The button verb is the conversion lever: "Submit" is a form, "Get early access" is an outcome. Match it to what actually happens next, because the second-worst thing after no signups is signups from people expecting something else. The proof line underneath (a real count, a real promise) does the trust work a second field would undo.

The Catch

One field means one field. Every additional ask — first name "for personalisation" — cuts completion measurably, and you can collect the name later in the welcome email with better context. If marketing insists, make them A/B it; the data ends this argument fast.

Handle failure without punishing the user: a rejected email keeps the input populated with an inline message under the field — never a cleared form, never an alert(). And success replaces the form in place ("Check your inbox ✉️") rather than redirecting away from the page they were sold on; they may not be done reading.

The Verdict

Hero + one email field + outcome-verb button + inline states. It's the highest-intent capture surface a landing page has, and it's mostly discipline about what to leave out. The component is in Velocity X's Heroes & Sections category, with the Growth & Conversion set for the rest of the funnel.

Let us make some quick suggestions?

Please provide your full name.
Please provide your phone number.
Please provide a valid phone number.
Please provide your email address.
Please provide a valid email address.
Please provide your brand name or website.
Please provide your brand name or website.