Waitlist Page in Next.js in 10 Minutes (With Autoresponder)

A waitlist page needs exactly two things: an email field, and somewhere for the submission to go. Here's a minimal client component:

'use client';

import { useState } from 'react';

const ENDPOINT = 'https://app.formbridge.ai/api/forms/fb_8h2k9p';

export default function WaitlistForm() {
  const [joined, setJoined] = useState(false);
  const [email, setEmail] = useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    const res = await fetch(ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify({ email }),
    });
    if (res.ok) setJoined(true);
  }

  if (joined) {
    return <p>You're on the list — check your inbox for a confirmation.</p>;
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-2">
      <input
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@company.com"
        className="flex-1 rounded-lg border px-3 py-2 text-sm"
      />
      <button type="submit" className="rounded-lg bg-black px-4 py-2 text-sm text-white">
        Join waitlist
      </button>
    </form>
  );
}

Because we're sending JSON directly, the object key doubles as the field name FormBridge sees — email — which matches the naming convention that also makes it eligible as the reply-to address for the autoresponder we set up next.

Setting up the autoresponder

This is where the "instant confirmation" happens — no code, just dashboard configuration. Open the form in FormBridge, go to Email Settings → Autoresponder, and turn it on:

• Subject: You're on the list
• Body: plain text or drag-and-drop, using the {{Email}} merge tag from your one field, plus the system tags {{FormName}} and {{DashboardUrl}} if you want them.

Example body:

Thanks for joining the waitlist!

We'll email {{Email}} the moment we open access. In the meantime,
follow along for updates.

FormBridge sends the autoresponder automatically after every submission that clears spam filtering — no extra step, no queue to manage from your app.

Optional: capture more than an email

If you want a name or a "how did you hear about us" field later, add inputs with new names — full-name, referral-source — and FormBridge picks them up automatically, no schema change and no redeploy. Update the autoresponder body to reference the new merge tags whenever you're ready.