Nextjs Contact Form That Sends Email and Blocks Spam

A Nextjs contact form looks like a ten-minute job: three fields, a button, an email in your inbox. Then the first spam wave arrives, a visitor loses a long message to a validation error, and you find out your SMTP password was one import away from the client bundle. This tutorial builds a contact form in the Next.js 16 App Router that validates with zod, sends the email from a Server Action, drops bots with a honeypot, limits each IP, and keeps what the visitor typed when something fails. At the end it swaps the bare form for the free Contact Page template.

What does a Next.js contact form need?

Five parts. The first three make a working form; the last two decide whether it survives real visitors:

1. One schema that defines what a valid message is, shared by every place that reads the form.
2. A Server Action that parses the form data, sends the email and returns field errors.
3. A client form with labels, inline errors, a pending button and a confirmation.
4. Spam protection that does not punish people: a honeypot and a rate limit.
5. Error recovery: the visitor's text survives a failed send or a validation error.

The email call, the step people search for as "nextjs contact form send email", is about ten lines. Parts 4 and 5 take more thought, and part 5 hides a React 19 behavior that clears the form after a failed send.

Should I use a Server Action or an API route?

Use a Server Action unless something other than your own form needs the endpoint. With an action, the <form action={...}> posts to the server without a fetch call, the form works before JavaScript loads, and useActionState hands the result straight back to the component. The Next.js forms guide (opens in a new tab) uses this pattern with zod for validation (checked November 5, 2026).

A Route Handler (app/api/contact/route.ts) is still the better choice when a mobile app, a webhook or a third-party form builder posts to the same endpoint. Both keep your email credentials on the server. One warning that applies to both: an action is a public HTTP endpoint. Anyone can call it with any payload, so validate on the server even if the client validates too.

How do I validate a contact form with zod?

Put the schema in its own file, without "use server", so the action and any client code can import it. Trim before checking, cap every length, and refuse line breaks in the name, because it ends up in an email subject.

// app/contact/schema.ts
import { z } from "zod"

export const contactSchema = z.object({
  name: z
    .string()
    .trim()
    .min(1, "Enter your name.")
    .max(100, "Keep the name under 100 characters.")
    .refine((value) => !/[\r\n]/.test(value), "Use one line for the name."),
  email: z
    .string()
    .trim()
    .toLowerCase()
    .pipe(z.email("Enter a valid email address, like emma@northwind.com.")),
  message: z
    .string()
    .trim()
    .min(20, "Tell us a little more, at least 20 characters.")
    .max(2000, "Keep the message under 2,000 characters."),
})

export type ContactInput = z.infer<typeof contactSchema>

This is zod 4 (the version current as of November 2026): z.email() is a top-level schema, and z.flattenError() turns a failed parse into { fieldErrors: { name?: string[], ... } }, which maps one to one onto form fields.

How do I send email from a Next.js contact form?

Any provider works. This example uses Nodemailer (opens in a new tab) with plain SMTP (npm install nodemailer and npm install -D @types/nodemailer), so it runs against your mail server, Amazon SES, Postmark or anything else that speaks SMTP. The server-only import makes a build error out of any attempt to pull this file into a client component.

// app/contact/mailer.ts
import "server-only"
import nodemailer from "nodemailer"
import type { ContactInput } from "./schema"

const transport = nodemailer.createTransport({
  host: process.env.SMTP_HOST,
  port: Number(process.env.SMTP_PORT ?? 587),
  secure: process.env.SMTP_PORT === "465",
  auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS },
})

export async function sendContactMail({ name, email, message }: ContactInput) {
  await transport.sendMail({
    // your own verified address; the visitor's goes in replyTo
    from: `"Website contact" <${process.env.CONTACT_FROM}>`,
    to: process.env.CONTACT_TO,
    replyTo: { name, address: email },
    subject: `New message from ${name}`,
    text: `${message}\n\nFrom: ${name} <${email}>`,
  })
}

Never put the visitor's address in from. Your domain's SPF and DKIM records do not cover it, DMARC alignment fails, and the message lands in spam or gets rejected. replyTo gives you the same one-click answer.

How do I stop spam with a honeypot?

A honeypot is a text field people never see and simple bots fill in, because they fill everything. If it has a value, the action pretends to succeed and sends nothing. Pretending matters: a bot that sees an error tries again with different input.

How do I rate limit a Server Action?

Count submissions per IP in a sliding window. The version below keeps the counts in memory, which is enough for one long-running Node server. On serverless or with several instances each copy has its own memory, so move the counter to Redis or your database, for example with Upstash's @upstash/ratelimit package.

// app/contact/rate-limit.ts
import "server-only"

const hits = new Map<string, number[]>()

export function rateLimit(key: string, limit: number, windowMs: number) {
  const now = Date.now()
  if (hits.size > 10_000) hits.clear() // keeps memory bounded
  const recent = (hits.get(key) ?? []).filter((time) => now - time < windowMs)
  const allowed = recent.length < limit
  if (allowed) recent.push(now)
  hits.set(key, recent)
  return allowed
}

How do I put it together in one Server Action?

One action ties it together: honeypot first, then the rate limit, then validation, then the send. Every failure returns the submitted values, which the next section explains.

// app/contact/actions.ts
"use server"

import { headers } from "next/headers"
import { z } from "zod"
import { sendContactMail } from "./mailer"
import { rateLimit } from "./rate-limit"
import { contactSchema } from "./schema"

type Values = { name: string; email: string; message: string }

export type ContactState = {
  status: "idle" | "sent" | "invalid" | "error"
  values?: Values
  errors?: Partial<Record<keyof Values, string[]>>
  message?: string
}

export async function sendContact(_prev: ContactState, formData: FormData): Promise<ContactState> {
  const values: Values = {
    name: String(formData.get("name") ?? ""),
    email: String(formData.get("email") ?? ""),
    message: String(formData.get("message") ?? ""),
  }

  // people never see this field; bots fill it
  if (formData.get("website")) return { status: "sent" }

  // behind a proxy you control, the first address is the client
  const ip = (await headers()).get("x-forwarded-for")?.split(",")[0]?.trim() || "unknown"
  if (!rateLimit(`contact:${ip}`, 5, 10 * 60_000)) {
    return { status: "error", values, message: "Too many messages. Try again in a few minutes." }
  }

  const parsed = contactSchema.safeParse(values)
  if (!parsed.success) {
    return { status: "invalid", values, errors: z.flattenError(parsed.error).fieldErrors }
  }

  try {
    await sendContactMail(parsed.data)
  } catch {
    return { status: "error", values, message: "Your message didn't go through. Try again." }
  }
  return { status: "sent" }
}

Only trust x-forwarded-for when your host or reverse proxy sets it; anyone can send that header straight to a bare Node server.

How do I build the form with React and Tailwind?

The form is a client component that calls useActionState. This step is what people search for as "react contact form tailwind": Tailwind v4 classes for the layout, and components that already carry the field styling. For the fields this uses the Wingo UI Input and Textarea, which render the label, the description and an animated error under the box through the shared Field anatomy, with the ids and aria-invalid wired for you. The Toast confirms a send without moving the layout.

npx wingo-ui@latest add input textarea button toast

Here is the error behavior the form will have. Press Continue with a short title and watch the message replace the hint, then type one character and watch it slide away.

// app/contact/contact-form.tsx
"use client"

import { useActionState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/toast"
import { sendContact, type ContactState } from "./actions"

const initialState: ContactState = { status: "idle" }

export function ContactForm() {
  const [state, formAction, pending] = useActionState(sendContact, initialState)

  useEffect(() => {
    if (state.status === "sent") {
      toast.success("Message sent", { description: "We'll reply within one business day." })
    }
    if (state.status === "error" && state.message) toast.error(state.message)
  }, [state])

  return (
    <form action={formAction} noValidate className="relative flex flex-col gap-4">
      <Input
        name="name"
        label="Name"
        autoComplete="name"
        required
        defaultValue={state.values?.name}
        error={state.errors?.name?.[0]}
      />
      <Input
        name="email"
        type="email"
        label="Email"
        autoComplete="email"
        required
        defaultValue={state.values?.email}
        error={state.errors?.email?.[0]}
      />
      <Textarea
        name="message"
        label="Message"
        placeholder="What can we help with?"
        required
        minRows={5}
        defaultValue={state.values?.message}
        error={state.errors?.message?.[0]}
      />

      {/* honeypot: off screen, skipped by Tab, hidden from screen readers */}
      <div aria-hidden="true" className="absolute -left-[9999px] h-px w-px overflow-hidden">
        <label htmlFor="website">Website</label>
        <input id="website" name="website" type="text" tabIndex={-1} autoComplete="off" />
      </div>

      <Button type="submit" loading={pending} loadingText="Sending">
        Send message
      </Button>
    </form>
  )
}

Mount the toaster once in the root layout with <Toaster /> from @/components/ui/toast, then render the form from a server page:

// app/contact/page.tsx
import type { Metadata } from "next"
import { ContactForm } from "./contact-form"

export const metadata: Metadata = {
  title: "Contact Northwind",
  description: "Questions about plans or your account? Send us a message and we reply within one business day.",
}

export default function ContactRoute() {
  return (
    <main className="mx-auto w-full max-w-lg px-4 py-16">
      <h1 className="text-3xl font-semibold tracking-tight">Talk to us</h1>
      <p className="mt-2 text-muted-foreground">We reply within one business day.</p>
      <div className="mt-8">
        <ContactForm />
      </div>
    </main>
  )
}

Why does the form clear itself after an error?

Because React 19 resets it. The React form docs (opens in a new tab) (checked November 5, 2026) say that after the action succeeds, all uncontrolled fields in the form are reset. "Succeeds" means the action did not throw, so an action that returns validation errors counts. Without the values round trip, a visitor who mistypes their email loses a 600-character message. Passing the values back as defaultValue means the reset restores what they typed, and after a real send values is empty, so the form clears as it should.

noValidate turns off the browser's own bubbles so every message comes from the zod schema, in the same place and style. The required props still draw the required mark and set aria-required.

Is there a Next.js contact form template?

Yes, and it is free. For a "next js contact form template" that is a whole contact page template rather than a bare form, the Wingo UI Contact Page template is the full page: topic cards (Sales, Support, Partnerships, Press), name, email, company, company size and message with a live counter, a consent box, copyable email and phone channels, office hours with a live open or closed status, offices on a drawn map, an FAQ and a logo row. It is one of the two templates in the free tier, next to the FAQ page.

npx wingo-ui@latest add contact-page

Fill in the form and send it. The demo waits 900 ms and then shows the confirmation panel; an empty field moves focus to the first problem.

The template validates on the client and calls onSubmit(values) with { name, email, company, companySize, topic, message, consent }. A promise keeps the button spinning; a rejection shows the template's "didn't go through" message. So the server side is a second action in the same file that takes an object and throws on failure. The template also asks for at least 20 characters in the message, so the shared schema agrees with it:

// app/contact/actions.ts: add this import at the top of the file
import type { ContactFormValues } from "@/components/templates/contact-page"

// and this below sendContact
const pageSchema = contactSchema.extend({
  company: z.string().trim().max(200),
  companySize: z.string().max(40),
  topic: z.enum(["sales", "support", "partnerships", "press"]),
  consent: z.literal(true),
})

export async function sendContactPage(values: ContactFormValues) {
  const ip = (await headers()).get("x-forwarded-for")?.split(",")[0]?.trim() || "unknown"
  if (!rateLimit(`contact:${ip}`, 5, 10 * 60_000)) throw new Error("Rate limited")
  const parsed = pageSchema.parse(values)
  await sendContactMail(parsed)
}

Wrap the template in a small client file. The route stays a server page that can export metadata, and the wrapper is the place for props a server page cannot pass, such as function labels like successDescription:

// app/contact/contact.tsx
"use client"

import Link from "next/link"
import { ContactPage } from "@/components/templates/contact-page"
import { sendContactPage } from "./actions"

export function Contact() {
  return (
    <ContactPage
      linkComponent={Link}
      header={false}
      footer={false}
      onSubmit={sendContactPage}
      showOffices={false}
      showLogos={false}
      channels={[
        { kind: "email", title: "Support", description: "Help with your account.", value: "support@northwind.com" },
      ]}
      hours={{ timeZone: "America/New_York", days: [1, 2, 3, 4, 5], open: 9, close: 18, label: "Mon to Fri, 9 AM to 6 PM ET" }}
      labels={{
        title: "Talk to Northwind",
        messagePlaceholder: "Tell us what you need help with.",
        consent: "I agree to be contacted by Northwind about this request.",
      }}
    />
  )
}

Then render <Contact /> from app/contact/page.tsx in place of <ContactForm />. The template has no honeypot field, so the rate limit and the server-side schema carry the spam protection here; the file is yours to edit if you want one. Before launch, replace the samples that are still showing: the FAQ (pass faq, or showFaq={false}) and, if you turn them back on, the Acme offices and the logo row, whose title claims 12,000 teams that are not yours. If you change the topic cards, change the z.enum in pageSchema with them. On phones the company size select opens as a bottom sheet and the channels move under the form, so the page needs no mobile work of its own.

What should I check before the contact page goes live?

• Deliverability. Send from a domain with SPF, DKIM and DMARC set up at your provider, and test that a reply goes to the visitor.
• Secrets. SMTP_PASS lives in server environment variables only. With import "server-only" in the mailer, a client import fails the build.
• Abuse. Submit the form six times in a minute and confirm the sixth is refused. Fill the honeypot from the dev tools and confirm nothing arrives.
• Recovery. Stop the SMTP server, send a long message, and check the text is still in the form with an error toast.
• Privacy. Link your privacy policy under the form (privacyHref on the template) and say what you do with the address.

More screens built step by step are in the Build it category, starting from the Next.js admin dashboard tutorial. For longer forms, the React multi-step form guide and the React form components guide go deeper on fields, and the shadcn login page tutorial uses the same Server Action pattern for sign-in.

Where to go from here

Start with the template if you want a finished page today: npx wingo-ui@latest add contact-page, wire onSubmit to the action above, and replace the sample content. The Contact Page, Field, Input, Textarea, Button and Toast are all in the free tier, so a free account (email only, no card) is enough to install every Wingo UI file in this tutorial.

FAQ

How do I send an email from a Next.js contact form?

Post the form to a Server Action, validate the fields with zod on the server, then call your email provider from the action: an SMTP transport like Nodemailer or a provider SDK. Keep the credentials in server-only environment variables and set the visitor's address as replyTo, never as from.

Should a Next.js contact form use a Server Action or an API route?

In the App Router a Server Action is the shorter path: the form posts to it without a fetch call, it works before JavaScript loads, and it returns field errors straight to useActionState. A Route Handler is still the right choice when other clients, like a mobile app or a webhook, must call the same endpoint.

Why does my Next.js form clear its fields after a validation error?

React 19 resets uncontrolled fields after a form action finishes without throwing, and returning validation errors counts as finishing. Return the submitted values from the action and pass them back as defaultValue, so the reset restores what the visitor typed.

How do I stop spam on a contact form without a captcha?

Add a honeypot: a text field hidden from people that bots fill in, and drop any submission where it has a value. Combine it with a per-IP rate limit and server-side validation; add a captcha only if spam still gets through.

Is there a free Next.js contact page template?

Yes. The Wingo UI Contact Page template is in the free tier: a validated form with topic cards, copyable channels, office hours, offices on a map and an FAQ. Install it with npx wingo-ui@latest add contact-page and pass a Server Action to onSubmit.