Next.js-Bewerbungsformular
Füge deiner Next.js-Karriereseite ein Bewerbungsformular mit Lebenslauf-Upload hinzu, ganz ohne Backend und ohne eigene Upload-API zu bauen. Kopiere den Code, sieh ihn dir live an, und Bewerbungen mit Anhang landen in deinem Posteingang.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- Verbinde Storage im Dashboard, damit das Formular Datei-Uploads akzeptieren kann.
- Kopiere den Next.js-Code in eine Client-Komponente, ergänze deinen Zugangsschlüssel und deploye.
Prompt für deinen KI-Coding-Agenten
Add a Formpaste job application form to my Next.js app. Use a client component with name, email, role, cover-note and a resume file input. Because it includes a file, POST it as multipart/form-data (send the raw FormData, not URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. Do not add an API route or an upload endpoint of my own.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
Der Lebenslauf ist ein Datei-Upload
Eine echte Bewerbung braucht den angehängten Lebenslauf, also postet das Formular Multipart-Formulardaten. Der generierte Code setzt enctype und sendet die Datei zusammen mit den übrigen Feldern.
Akzeptiere gängige Dokumenttypen
Bewerber senden PDF- und Word-Dateien. Beschränke dich nicht auf einen einzigen Typ, sonst verlierst du Bewerber.
Leite Bewerbungen an den richtigen Posteingang weiter
Sende Bewerbungen an deine Recruiting-Adresse, und reply-to wird auf den Bewerber gesetzt, damit du direkt antworten kannst.
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: 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">Vollständiger Name
<input type="text" name="name" 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>
<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" 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>
<label className="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Beworbene Stelle
<input type="text" name="role" 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>
<label className="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Anschreiben
<textarea name="message" className="min-h-28 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"></textarea>
</label>
<label className="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Lebenslauf
<input type="file" name="resume" 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">Bewerbung absenden</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-Bewerbungsformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.