How do I take payment?

After validation, create a Stripe or Lemon Squeezy checkout for the chosen ticket and quantity in your server action, and redirect to it.

Can I limit how many tickets one person buys?

Yes. The schema allows 1 to 5; change the min and max in the quantity rule.

Can I change the event details?

Yes. The header text and the TICKETS array hold the event name, date, place, ticket names and prices.

Event Registration Form

A free event registration form template for React: event header, attendee details, ticket types with prices, quantity, dietary needs and terms, validated with React Hook Form and Zod.

ReactTailwind CSSReact Hook FormZodFree

event-registration-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 Event Registration Form

A registration form for conferences, meetups and workshops: an event header, name and email, an optional company for the badge, ticket type cards with prices, a quantity field, dietary needs and a terms checkbox.

When to use it

Use it for conferences, meetups, workshops, webinars with paid tiers, or any event that sells tickets.

How to use the Event Registration Form

1Install the dependencies: npm i react-hook-form zod @hookform/resolvers.
2Copy the code into components/event-registration-form.tsx (or anywhere in your project).
3Render <EventRegistrationForm /> 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.

Waitlist Form

Email signup with an optional role and a referral link on success.

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.

Support Ticket Form

Category, priority, description and an optional attachment.