How does per-step validation work?

Each step lists its field names. Continue calls trigger() with only those fields, so the user can't move forward with errors, and the final submit still validates the whole schema.

Can I add or remove steps?

Yes. Add an entry to the STEPS array with a title and its fields, and render that step's inputs where step === index. The stepper updates automatically.

Does it keep values when going back?

Yes. All steps share one React Hook Form instance, so going Back and Forward keeps everything the user typed.

How do I send the data to my backend?

Replace the placeholder in onSubmit with your server action or fetch call. The values are already validated and typed by the Zod schema.

Inputs have labels, errors are linked with aria-describedby and announced with role="alert", invalid fields get aria-invalid, and the current step is marked with aria-current.

Multi-step Signup Form

A free multi-step form template for React and Tailwind CSS: account, workspace, plan and review steps, a progress stepper, per-step validation with React Hook Form and Zod, and a success state.

ReactTailwind CSSReact Hook FormZodFree

multi-step-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 Multi-step Signup Form

A signup wizard that splits a long form into four short steps: account, workspace, plan and review. A stepper at the top shows where the user is, and each step is validated before moving on, so errors appear while the fields are still on screen.

It's one React component with React Hook Form and a single Zod schema. Each step lists its own fields, and the Continue button validates only those with trigger().

When to use it

Use it for onboarding flows, SaaS signups, checkouts and applications: any form with more than six or seven fields, where one long page would feel like a chore.

How to use the Multi-step Signup Form

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

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.

Event Registration Form

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

Support Ticket Form

Category, priority, description and an optional attachment.