Next.js-Newsletter-Formular
Füge deiner Next.js-Seite eine Newsletter-Anmeldung hinzu, ganz ohne Backend. Ein E-Mail-Feld, Code zum Kopieren, und Abonnenten landen in deinem Posteingang oder deinem E-Mail-Tool. Keine API-Route erforderlich.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- Kopiere den Next.js-Code in eine Client-Komponente und wähle dein Styling.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und deploye.
Prompt für deinen KI-Coding-Agenten
Add a Formpaste newsletter signup form to my Next.js app. Use a client component with a single email field that POSTs as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. Show a subscribed message after the fetch resolves. Do not add an API route.Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.
Next.js-Fallstricke
Next.js bietet dir API-Routen, aber für einfachere Formulare ist eine eigene Route Handler zu viel Aufwand. Formpaste übernimmt das Backend, damit deine Next.js-App sich auf das Frontend konzentrieren kann. Funktioniert sowohl mit App Router als auch mit Pages Router.
Client-Komponente für die Fetch-Variante
Der onSubmit-Fetch muss im Browser laufen, also platziere das Formular in einer Datei mit "use client" ganz oben. Ein einfaches <form action> mit Weiterleitung funktioniert auch in einer Server-Komponente, falls du kein JS brauchst.
Keine API-Route nötig
Du brauchst kein /api/contact. Ein direktes POST an den Formpaste-Endpunkt hält deine App static-freundlich und überall deploybar, auch beim statischen Export.
Server Actions sind optional
Du kannst eine Server Action einbinden, aber sie ist nicht erforderlich und fügt einen zusätzlichen Server-Roundtrip hinzu. Das direkte POST ist einfacher und funktioniert auch bei statischem Hosting.
Edge-Runtime und Datei-Uploads
Nutzt eine Route die Edge-Runtime, unterscheidet sich die Verarbeitung von Multipart-Formulardaten von Node. Bei Formularen mit Datei-Upload postest du direkt vom Client an Formpaste, damit deine eigene Runtime den Upload nie verarbeiten muss.
Static-Export-freundlich
Weil das Formular an einen externen Endpunkt postet, funktioniert output: export weiterhin. Zur Anfragezeit läuft kein eigener Server-Code.
Worauf es ankommt
Ein Feld konvertiert am besten
Ein Newsletter-Formular sollte nur nach der E-Mail fragen. Jedes zusätzliche Feld senkt die Anmeldungen.
Bestätige, bevor du feierst
Zeig bei Erfolg eine Abonniert-Meldung. Falls du Double-Opt-in brauchst, versende die Bestätigung über dein E-Mail-Tool, nicht über das Formular.
Leite an dein E-Mail-Tool weiter
Leite Einsendungen mit einem Webhook an dein ESP weiter, damit neue Abonnenten dort landen, wo du deine Kampagnen versendest.
So funktioniert es
Drei einfache Schritte, bis Formular-Einsendungen in deinem E-Mail-Posteingang landen.
Erstelle dein Formular, setze die action-URL auf den Formpaste-Endpunkt und trage deinen Zugangsschlüssel ein.
Formular erstellen
Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.
Code kopieren
Füge das Snippet oben in dein Projekt ein. Wähle CSS oder Tailwind passend zu deiner Website.
export function ContactForm() {
async function onSubmit(e) {
e.preventDefault();
const form = new FormData(e.currentTarget);
await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form) });
}
return (
<form onSubmit={onSubmit} className="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
<label className="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">E-Mail
<input type="email" name="email" placeholder="du@beispiel.de" required className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<button type="submit" className="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">Abonnieren</button>
</form>
);
}Zugangsschlüssel hinzufügen
Ersetze den Platzhalter durch deinen Zugangsschlüssel, um Einsendungen zu empfangen.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">Next.js-Newsletter-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.