Webflow-Bewerbungsformular
Füge deiner Webflow-Karriereseite ein Bewerbungsformular mit Lebenslauf-Upload hinzu, ohne für Webflows Datei-Uploads zu bezahlen. Nutze ein Embed-Element mit dem Markup, und Bewerbungen mit Anhängen landen in deinem Posteingang. Kein Backend.
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 annehmen kann.
- Füge ein Embed-Element mit dem obigen Markup und deinem Zugangsschlüssel hinzu, dann veröffentliche.
Webflow-Fallstricke
Webflows natives Formular ist echt, aber der kostenlose Plan begrenzt dich auf eine Handvoll Einsendungen, und Datei-Uploads brauchen einen bezahlten Tier. Mit Formpaste hast du zwei saubere Optionen: repointe die Action-URL des nativen Formulars, oder nutze ein Embed-Element mit eigenem Markup für Dinge, die Webflow nativ nicht kann, wie mehrstufige Formulare oder Datei-Upload.
Repointe die Action-URL, oder nutze ein Embed
Für ein Standardformular setzt du die Action des Formulars auf den Formpaste-Endpunkt und fügst ein verstecktes access_key-Feld hinzu. Für volle Kontrolle - mehrstufig, Datei-Upload, eigene Felder - nutze stattdessen ein HTML-Embed-Element mit dem generierten Markup.
Umgehe das Einsendungslimit
Webflows kostenloser Plan begrenzt Formular-Einsendungen. Ein POST an Formpaste entfernt dieses Limit - Einsendungen landen in deinem Formpaste-Posteingang, unabhängig von deinem Webflow-Plan.
Datei-Uploads ohne bezahlten Tier
Webflow sperrt Datei-Uploads hinter einen bezahlten Plan. Ein Embed, das Multipart-Formulardaten an Formpaste sendet, akzeptiert Uploads ganz ohne Webflow-Upgrade, und deine Seite verarbeitet die Datei nie selbst.
Behalte den access_key im Markup
Ob du die Action repointest oder ein Embed nutzt - das versteckte access_key-Eingabefeld muss vorhanden sein, damit Formpaste weiß, welches Formular die Einsendung erhalten hat.
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.
<form action="https://api.formpaste.com/submit" method="POST" enctype="multipart/form-data" class="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 class="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 class="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 class="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 class="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 class="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 class="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 class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Anschreiben
<textarea name="message" class="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 class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Lebenslauf
<input type="file" name="resume" required class="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" class="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">Webflow-Bewerbungsformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.