How do I receive the messages by email?

Call your backend from onSubmit. In Next.js, a server action that sends the values with Resend, Postmark or Nodemailer takes about ten lines. Services like Formspree work too.

Can I change the topics?

Yes. Edit the TOPICS array; the dropdown and the Zod enum both read from it.

Does it work with shadcn/ui?

Yes. It uses the shadcn/ui theme tokens (bg-card, border-input, text-muted-foreground, ring), so it matches your theme in light and dark mode without changes.

Add a honeypot field that real users never see, rate-limit the server action, or verify a Cloudflare Turnstile token before sending.

Contact Form

A free React contact form template with Tailwind CSS, React Hook Form and Zod validation: name, email, company, topic, message and consent fields, accessible errors and a success screen.

ReactTailwind CSSReact Hook FormZodFree

contact-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 Contact Form

A complete contact form with the fields most sites need: name, email, an optional company, a topic dropdown, a message and a consent checkbox. Validation runs on submit with clear messages under each field, and a success screen replaces the form once it's sent.

When to use it

Use it on a contact page, a support page, a pricing page's "Talk to sales" section, or in a modal behind a "Get in touch" button.

How to use the Contact Form

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

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.