# Nextjs Contact Form: E-Mail senden und Spam blocken > So baust du ein nextjs contact form im App Router: zod-Validierung, eine Server Action, die die E-Mail sendet, Honeypot, Rate Limit und eine kostenlose Vorlage. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 5. Nov. 2026 - Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build) - Lesezeit: 10 Min. - Kanonische URL: https://wingo-ui.com/de/blog/nextjs-contact-form - Englische Fassung: https://wingo-ui.com/blog/nextjs-contact-form ## Kurz gesagt Ein Kontaktformular in Next.js braucht im App Router ein zod-Schema, eine Server Action, die die Formulardaten validiert und die E-Mail sendet, und ein Client-Formular, das die Fehler mit useActionState anzeigt. Bevor die Seite live geht, kommen ein verstecktes Honeypot-Feld und ein Rate Limit pro IP dazu, und die Action gibt die eingegebenen Werte zurück, damit React 19 das Formular bei einem Fehler nicht leert. Wenn du statt eines nackten Formulars die ganze Seite willst: Die Vorlage Contact Page von Wingo UI ist kostenlos und nimmt dieselbe Server Action über ihren Prop onSubmit entgegen. Ein Nextjs Contact Form sieht nach zehn Minuten Arbeit aus: drei Felder, ein Button, eine E-Mail im Postfach. Dann kommt die erste Spamwelle, ein Besucher verliert wegen eines Validierungsfehlers eine lange Nachricht, und du merkst, dass dein SMTP-Passwort nur einen Import vom Client-Bundle entfernt war. Dieses Tutorial baut ein Next.js-Kontaktformular im App Router von Next.js 16, das mit zod validiert, die E-Mail aus einer Server Action sendet, Bots per Honeypot aussortiert, Anfragen pro IP begrenzt und behält, was der Besucher getippt hat, wenn etwas schiefgeht. Zum Schluss ersetzt die kostenlose Vorlage Contact Page das nackte Formular. ## Was braucht ein Next.js-Kontaktformular? Fünf Teile. Die ersten drei ergeben ein funktionierendes Formular, die letzten zwei entscheiden, ob es echte Besucher übersteht: 1. **Ein Schema**, das festlegt, was eine gültige Nachricht ist, und das jede Stelle nutzt, die das Formular liest. 2. **Eine Server Action**, die die Formulardaten parst, die E-Mail sendet und Feldfehler zurückgibt. 3. **Ein Client-Formular** mit Labels, Fehlern direkt am Feld, einem Button mit Ladezustand und einer Bestätigung. 4. **Spamschutz**, der keine Menschen bestraft: ein Honeypot und ein Rate Limit. 5. **Fehlertoleranz**: Der Text des Besuchers übersteht einen gescheiterten Versand oder einen Validierungsfehler. Der eigentliche E-Mail-Versand, also der Schritt, den Leute mit „nextjs contact form send email“ suchen, ist etwa zehn Zeilen lang. Die Teile 4 und 5 brauchen mehr Überlegung, und hinter Teil 5 steckt ein Verhalten von React 19, das das Formular nach einem gescheiterten Versand leert. ## Soll ich eine Server Action oder eine API-Route nehmen? Nimm eine Server Action, solange nichts außer deinem eigenen Formular den Endpunkt braucht. Mit einer Action schickt `
` die Daten ohne `fetch`-Aufruf an den Server, das Formular funktioniert schon, bevor JavaScript geladen ist, und `useActionState` gibt das Ergebnis direkt an die Komponente zurück. Der [Forms-Guide von Next.js](https://nextjs.org/docs/app/guides/forms) nutzt genau dieses Muster mit zod für die Validierung (geprüft am 5. November 2026). Ein Route Handler (`app/api/contact/route.ts`) ist weiterhin die bessere Wahl, wenn eine Mobile App, ein Webhook oder ein Formular-Builder von Drittanbietern an denselben Endpunkt sendet. In beiden Fällen bleiben deine E-Mail-Zugangsdaten auf dem Server. Eine Warnung gilt für beide: Eine Action ist ein öffentlicher HTTP-Endpunkt. Jeder kann sie mit beliebigen Daten aufrufen, also validierst du auf dem Server, auch wenn der Client schon validiert. ## Wie validiere ich ein Kontaktformular mit zod? Leg das Schema in eine eigene Datei ohne `"use server"`, damit die Action und jeder Client-Code es importieren können. Trimm die Werte vor der Prüfung, begrenz jede Länge und lehn Zeilenumbrüche im Namen ab, denn der landet im Betreff einer E-Mail. ```ts // app/contact/schema.ts import { z } from "zod" export const contactSchema = z.object({ name: z .string() .trim() .min(1, "Gib deinen Namen ein.") .max(100, "Der Name darf höchstens 100 Zeichen lang sein.") .refine((value) => !/[\r\n]/.test(value), "Schreib den Namen in eine Zeile."), email: z .string() .trim() .toLowerCase() .pipe(z.email("Gib eine gültige E-Mail-Adresse ein, zum Beispiel emma@northwind.com.")), message: z .string() .trim() .min(20, "Erzähl uns etwas mehr, mindestens 20 Zeichen.") .max(2000, "Die Nachricht darf höchstens 2.000 Zeichen lang sein."), }) export type ContactInput = z.infer ``` Das ist zod 4 (die aktuelle Version im November 2026): `z.email()` ist ein eigenständiges Schema auf oberster Ebene, und `z.flattenError()` macht aus einem gescheiterten Parse `{ fieldErrors: { name?: string[], ... } }`, was sich eins zu eins auf die Formularfelder abbilden lässt. ## Wie sende ich E-Mails aus einem Next.js-Kontaktformular? Jeder Anbieter funktioniert. Dieses Beispiel nutzt [Nodemailer](https://nodemailer.com/) mit normalem SMTP (`npm install nodemailer` und `npm install -D @types/nodemailer`), es funktioniert also mit deinem eigenen Mailserver, Amazon SES, Postmark oder alles andere, was SMTP spricht. Der Import von `server-only` sorgt dafür, dass jeder Versuch, diese Datei in eine Client-Komponente zu ziehen, den Build abbricht. ```ts // 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({ // deine eigene verifizierte Adresse; die des Besuchers kommt in replyTo from: `"Kontaktformular" <${process.env.CONTACT_FROM}>`, to: process.env.CONTACT_TO, replyTo: { name, address: email }, subject: `Neue Nachricht von ${name}`, text: `${message}\n\nVon: ${name} <${email}>`, }) } ``` Setz die Adresse des Besuchers nie in `from`. Die SPF- und DKIM-Einträge deiner Domain decken sie nicht ab, die DMARC-Ausrichtung schlägt fehl, und die Nachricht landet im Spam oder wird abgelehnt. Mit `replyTo` antwortest du genauso mit einem Klick. ### Wie halte ich Spam mit einem Honeypot fern? Ein Honeypot ist ein Textfeld, das Menschen nie sehen und einfache Bots ausfüllen, weil sie schlicht alles ausfüllen. Hat es einen Wert, tut die Action so, als hätte alles geklappt, und sendet nichts. Das Vortäuschen ist wichtig: Ein Bot, der einen Fehler sieht, versucht es mit anderen Eingaben noch einmal. ### Wie baue ich ein Rate Limit für eine Server Action? Zähl die Anfragen pro IP in einem gleitenden Zeitfenster. Die Version unten hält die Zähler im Arbeitsspeicher, und das reicht für einen einzelnen, dauerhaft laufenden Node-Server. Läuft die App serverless oder auf mehreren Instanzen, hat jede Kopie ihren eigenen Speicher. Dann gehört der Zähler nach Redis oder in deine Datenbank, zum Beispiel mit dem Paket `@upstash/ratelimit` von Upstash. ```ts // app/contact/rate-limit.ts import "server-only" const hits = new Map() export function rateLimit(key: string, limit: number, windowMs: number) { const now = Date.now() if (hits.size > 10_000) hits.clear() // hält den Speicher begrenzt 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 } ``` ### Wie setze ich alles in einer Server Action zusammen? Eine Action verbindet die Teile: zuerst der Honeypot, dann das Rate Limit, dann die Validierung, dann der Versand. Jeder Fehlerfall gibt die eingegebenen Werte zurück. Warum, erklärt der nächste Abschnitt. ```ts // 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> message?: string } export async function sendContact(_prev: ContactState, formData: FormData): Promise { const values: Values = { name: String(formData.get("name") ?? ""), email: String(formData.get("email") ?? ""), message: String(formData.get("message") ?? ""), } // Menschen sehen dieses Feld nie, Bots füllen es aus if (formData.get("website")) return { status: "sent" } // hinter einem Proxy, den du kontrollierst, ist die erste Adresse der 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: "Zu viele Nachrichten. Versuch es in ein paar Minuten noch einmal." } } 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: "Deine Nachricht ist nicht angekommen. Versuch es noch einmal." } } return { status: "sent" } } ``` Vertrau `x-forwarded-for` nur, wenn dein Hoster oder Reverse Proxy den Header setzt; an einen nackten Node-Server kann jeder diesen Header direkt schicken. ## Wie baue ich das Formular mit React und Tailwind? Das Formular ist eine Client-Komponente, die `useActionState` aufruft. Diesen Schritt suchen Leute mit „react contact form tailwind“: Klassen aus Tailwind v4 für das Layout und Komponenten, die das Styling der Felder schon mitbringen. Für die Felder nutzt das Beispiel [Input](https://wingo-ui.com/components/input) und [Textarea](https://wingo-ui.com/components/textarea) von Wingo UI. Beide rendern über die gemeinsame Anatomie von [Field](https://wingo-ui.com/components/field) das Label, die Beschreibung und unter dem Feld einen animierten Fehler, und die ids und `aria-invalid` sind schon verdrahtet. Der [Toast](https://wingo-ui.com/components/toast) bestätigt den Versand, ohne das Layout zu verschieben. ```bash npx wingo-ui@latest add input textarea button toast ``` So verhalten sich die Fehler im Formular. Drück „Continue“ mit einem zu kurzen Titel und sieh zu, wie die Meldung den Hinweis ersetzt. Tipp dann ein Zeichen, und sie gleitet wieder weg. > Live-Demo (Field): Drück „Continue“ mit einem Titel unter 10 Zeichen: Der Fehler ersetzt den Hinweis, und der Fokus springt ins Feld. Sobald du tippst, gleitet der Fehler weg. Probier sie unter [Field](https://wingo-ui.com/components/field) aus und installier sie mit `npx wingo-ui@latest add field`. ```tsx // 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("Nachricht gesendet", { description: "Wir antworten innerhalb eines Werktags." }) } if (state.status === "error" && state.message) toast.error(state.message) }, [state]) return (