Where do I store the emails?

Save them from onSubmit with a server action: a database table, a Google Sheet, or your email tool's API (Resend Audiences, Loops, ConvertKit).

How do referral positions work?

The template shows a fixed number. In your backend, return the user's position and a unique referral code, and move people up when someone signs up with their code.

Can I remove the role picker?

Yes. Delete the fieldset and the role field from the schema; the form works with email only.

Waitlist Form

A free waitlist form template for React and Tailwind CSS: email signup with Zod validation, optional role chips, and a success screen with the user's position and a referral link.

ReactTailwind CSSReact Hook FormZodFree

waitlist-form.tsx

Installation

Install the form libraries, then copy the code above into your project.

npm i react-hook-form zod @hookform/resolvers

About the Waitlist Form

A compact waitlist signup: one email field, an optional role picker, and a success state that shows the user's place in line with a referral link to share.

When to use it

Use it on a pre-launch landing page, a beta signup, or a "notify me" section for a feature that isn't ready yet.

How to use the Waitlist Form

1Install the dependencies: npm i react-hook-form zod @hookform/resolvers.
2Copy the code into components/waitlist-form.tsx (or anywhere in your project).
3Render <WaitlistForm /> on any page.
4Replace the placeholder in onSubmit with your server action or API call.

Send submissions by email

In Next.js, a server action can email every submission with Resend. Call it from onSubmit: await submitForm(values).

// app/actions.ts
"use server";

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function submitForm(values: Record<string, unknown>) {
  await resend.emails.send({
    from: "Website <hello@yourdomain.com>",
    to: "you@yourdomain.com",
    subject: "New form submission",
    text: JSON.stringify(values, null, 2),
  });
}

More form templates

All forms →

Multi-step Signup Form

A four-step signup wizard with a stepper, per-step validation and a review screen.

Contact Form

Name, email, topic and message with validation, consent and a success state.

Email and password sign in with show password, remember me and social buttons.

Job Application Form

Role, experience, resume upload and cover letter with file validation.

Appointment Booking Form

Service cards, date and time slots, contact details and a confirmation.

Feedback & NPS Form

A 0–10 recommend score, reason, improvement topics and optional email.

Newsletter Signup Form

Email signup with topic checkboxes, frequency and double opt-in message.

Event Registration Form

Ticket types with prices, quantity, dietary needs and terms.

Support Ticket Form

Category, priority, description and an optional attachment.