How is NPS calculated?

Scores of 9–10 are promoters, 7–8 passives and 0–6 detractors. NPS is the percentage of promoters minus the percentage of detractors.

Is the email required?

No. It's optional, so people can answer anonymously, but they can leave it if they'd like a reply.

Can I ask different questions?

Yes. Change the legend text, the TOPICS array and the schema; the layout stays the same.

Feedback & NPS Form

A free NPS and feedback form template for React: a 0 to 10 recommend score, an open reason field, improvement topics and an optional email, built with React Hook Form and Zod.

ReactTailwind CSSReact Hook FormZodFree

Installation

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

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

About the Feedback & NPS Form

A Net Promoter Score survey: the 0 to 10 "how likely are you to recommend us" question as tappable buttons, a reason field, optional improvement topics and an optional email for follow-up.

When to use it

Use it after onboarding, after a support ticket closes, in a product email, or as an in-app survey.

How to use the Feedback & NPS Form

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

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.