How do I connect it to my email tool?

Send the values to your provider's API from a server action: Resend Audiences, Loops, ConvertKit, Mailchimp or Beehiiv all have a subscribe endpoint.

What is double opt-in?

Subscribers confirm their address by clicking a link in an email. It keeps fake addresses off your list and is required in some countries.

Can I remove the topic and frequency choices?

Yes. Delete those fieldsets and their fields in the schema to get a single email field.

Newsletter Signup Form

A free newsletter signup form template for React and Tailwind CSS: email, topic checkboxes, weekly or monthly frequency and a check-your-inbox confirmation, validated with Zod.

ReactTailwind CSSReact Hook FormZodFree

newsletter-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 Newsletter Signup Form

A newsletter signup card where subscribers choose what they want: topic checkboxes, a weekly or monthly switch, and a confirmation that asks them to check their inbox for the double opt-in link.

When to use it

Use it on a blog, in a footer, at the end of an article or on a dedicated subscribe page.

How to use the Newsletter Signup Form

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

Event Registration Form

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

Support Ticket Form

Category, priority, description and an optional attachment.