Ein Webflow-Kontaktformular sieht von Haus aus gut aus, aber Webflow schickt dir die Formulardaten nur per E-Mail - es speichert keine Einträge in einer Datenbank, verbindet sich nicht mit deinem CRM und löst keine eigene Logik aus. Wenn du mehr als eine einfache E-Mail-Benachrichtigung brauchst, musst du deine Webflow-Formulareinreichungen über einen externen Dienst leiten. Die gute Nachricht: Das funktioniert komplett ohne eine einzige Zeile Backend-Code.
Inhaltsverzeichnis
Was Webflow standardmäßig bietet
Der eingebaute Formular-Handler von Webflow macht drei Dinge: Er sendet eine E-Mail-Benachrichtigung an den Seitenbetreiber, zeigt eine Erfolgsmeldung an und speichert Einreichungen im Webflow-Dashboard (bei kostenpflichtigen Tarifen). Für einfache Kontaktformulare auf kleinen Websites reicht das aus - aber sobald du eines der folgenden Features brauchst, stößt du schnell an Grenzen:
- Automatische Antworten an die Person, die das Formular ausgefüllt hat
- Weiterleitung von Einreichungen an ein bestimmtes Team-Postfach oder CRM
- Bedingte Logik (z. B. Leads nach Produktinteresse weiterleiten)
- Spam-Filterung über Webflows einfaches Honeypot-Verfahren hinaus
- Zuverlässiges Zustellungsprotokoll mit Zeitstempeln und Wiederholungsversuchen
All das ist nativ nicht verfügbar. Du brauchst eine externe Schicht - und es gibt drei realistische Wege, diese hinzuzufügen.
Native Integrationen - Zapier und Make
Webflow hat eine direkte Integration mit Zapier und Make (ehemals Integromat). Sobald eine neue Formulareinreichung eingeht, wird der Trigger ausgelöst und du kannst beliebige Aktionen verketten: eine Zeile in Google Sheets hinzufügen, einen HubSpot-Kontakt anlegen, eine Slack-Nachricht senden und vieles mehr.
Das ist der No-Code-Weg, den die meisten Designer zuerst wählen. Die Einrichtung sieht so aus:
- Gehe in Webflow zu Projekteinstellungen > Integrationen und verbinde deinen Zapier-Account.
- Erstelle in Zapier einen neuen Zap mit Webflow - New Form Submission als Trigger.
- Wähle das gewünschte Formular anhand seines Namens aus.
- Füge deinen Aktionsschritt hinzu (Gmail, Slack, Airtable usw.).
- Teste den Zap mit einer echten Einreichung und aktiviere ihn.
Make ist für komplexe Workflows günstiger, aber beide Plattformen erzeugen eine Abhängigkeit: Wenn Zapier oder Make ausfällt oder dein Account ein Limit erreicht, schlagen Einreichungen lautlos fehl oder stauen sich in der Warteschlange auf.
Einen Webflow Webhook verwenden
Ein Webflow Webhook ist der direktere Weg. Webflow sendet bei jeder Formulareinreichung einen HTTP-POST an eine von dir festgelegte URL. Du kontrollierst den empfangenden Endpoint und kannst mit dem Payload beliebig verfahren.
So richtest du einen Webhook ein:
- Gehe in Webflow zu Projekteinstellungen > Integrationen > Webhooks .
- Klicke auf Webhook hinzufügen und wähle den Trigger Formulareinreichung .
- Füge die Endpoint-URL deines empfangenden Dienstes ein.
- Speichere und teste mit einer echten Einreichung.
Der Payload, den Webflow sendet, ist ein JSON-Objekt mit allen Feldwerten, dem Formularnamen und Metadaten der Website. Ein typischer Payload sieht so aus:
{
"name": "Contact Form",
"site": "my-webflow-site",
"data": {
"Name": "Jane Smith",
"Email": "[email protected]",
"Message": "Hi, I'd like a quote."
},
"submittedAt": "2024-11-15T10:22:00Z"
}Der Haken: Du brauchst etwas, das diesen Webhook empfängt. Möglichkeiten sind ein kleiner Cloudflare Worker , ein Pipedream-Workflow oder ein dediziertes Formular-Backend. Ein eigenes Empfangssystem zu schreiben ist genau das "eigenes Backend"-Problem, das dieser Artikel dir ersparen soll. Genau hier werden Formular-zu-E-Mail-Dienste zur saubersten Lösung.
Den Formular-Endpoint durch einen Formulardienst ersetzen
Anstatt Webflows eigenen Formular-Handler zu verwenden, kannst du das
action
-Attribut deines Formulars direkt auf einen Drittanbieter-Formulardienst zeigen lassen. Der Dienst empfängt den POST, validiert ihn, filtert Spam und schickt dir die Ergebnisse per E-Mail - ohne dass du ein eigenes Backend benötigst.
Der Ablauf in Webflow ist folgender:
- Wähle im Webflow Designer dein Formularelement aus.
-
Trage im Bereich
Formulareinstellungen
die Endpoint-URL deines Formulardienstes in das Feld
Aktion
ein (z. B.
https://sendform.net/!your-form-id). - Setze die Methode auf POST .
-
Stelle sicher, dass jedes Eingabefeld ein
name-Attribut hat - Webflow setzt diese standardmäßig. - Veröffentliche die Website und teste eine Einreichung.
Dieser Ansatz umgeht Webflows eigenen Formular-Handler vollständig. Die Einreichung geht direkt vom Browser des Besuchers an den Formulardienst. Du erhältst die E-Mail, der Dienst kümmert sich um Wiederholungsversuche und Spam-Filterung, und Webflow bleibt reine UI-Schicht.
Dasselbe Prinzip funktioniert für jede statische oder No-Code-Website. Wenn du auch auf GitHub Pages oder Cloudflare Pages hostest, erklärt der Artikel über kostenloses Hosting statischer Websites mit funktionierenden Kontaktformularen genau denselben Ansatz.
Sendform im Vergleich zu den Alternativen
Mehrere Formulardienste funktionieren mit Webflow. Hier ein Vergleich der wichtigsten Optionen nach den Kriterien, die bei einem Kontaktformular wirklich zählen:
| Dienst | Kostenloser Tarif | Einrichtungsaufwand | Eigene Weiterleitung | Spam-Filterung | DSGVO-konform |
|---|---|---|---|---|---|
| Sendform | Ja | Eine URL einfügen | Ja | Ja | Ja |
| Formspree | 50 Einreichungen/Monat | Registrierung + URL einfügen | Nur kostenpflichtig | Einfach (reCAPTCHA nur kostenpflichtig) | Teilweise |
| Netlify Forms | 100 Einreichungen/Monat | Netlify-Hosting erforderlich | Ja | Ja | Teilweise |
| Zapier (via Webhook) | 100 Tasks/Monat | Mehrstufiger Workflow | Manuell | Nicht integriert | Abhängig vom Zap |
| Basin | 100 Einreichungen/Monat | Registrierung + URL einfügen | Ja | Ja | Teilweise |
Sendform hebt sich aus einigen konkreten Gründen ab, die in einer Tabelle keinen Platz finden:
- Reibungslose Einrichtung: Du erhältst eine Formular-Endpoint-URL, ohne vorher ein Konto anlegen zu müssen. Einfach in Webflows Aktionsfeld einfügen - fertig.
- Standardmäßig keine Datenspeicherung: Sendform leitet die Daten per E-Mail weiter und speichert sie nicht auf eigenen Servern - die richtige Voreinstellung für DSGVO-Konformität. Mitbewerber wie Formspree speichern alle Einreichungen in ihrem Dashboard, sodass die Daten deiner Nutzer dauerhaft auf einem Drittanbieter-Server liegen.
- Entwicklerfreundlich und trotzdem ohne Code nutzbar: Anders als bei Zapier gibt es keinen Workflow zu pflegen. Anders als bei Netlify Forms bist du nicht an einen bestimmten Hosting-Anbieter gebunden - Sendform funktioniert mit Webflow, GitHub Pages oder jedem anderen Host.
- Ehrlicher kostenloser Tarif: Keine versteckten "Upgrade erforderlich"-Schranken für Weiterleitungen, wie sie andere Dienste nutzen, um dich in kostenpflichtige Tarife zu drängen.
Welcher Ansatz ist der richtige für dich?
Die richtige Wahl hängt davon ab, was du nach der Formulareinreichung tatsächlich brauchst:
- Nur E-Mail-Benachrichtigungen: Nimm Sendform. Die Endpoint-URL in Webflows Aktionsfeld einfügen - in zwei Minuten erledigt.
- E-Mail plus CRM- oder Tabellensynchronisierung: Nutze Sendform für die E-Mail-Zustellung und füge optional einen Zapier-Schritt hinzu, der durch die eingehende E-Mail ausgelöst wird - oder verwende Sendforms Webhook-Ausgabe, sofern in deinem Tarif verfügbar.
- Komplexe mehrstufige Automatisierung: Ein Webflow Webhook in Make oder Zapier ist hier sinnvoll, aber plane für einen kostenpflichtigen Tarif ein.
- Du hostest bereits auf Netlify: Netlify Forms ist für einfache Fälle in Ordnung, aber das Limit von 100 Einreichungen pro Monat ist bei einer aktiven Website schnell erreicht.
Für die große Mehrheit der Webflow-Kontaktformulare - ein Name-, E-Mail- und Nachrichtenfeld, das zuverlässig in deinem Posteingang landen soll - ist Sendform der schnellste und sauberste Weg. Kein Backend, keine monatlichen Task-Limits, die du im Blick behalten musst, und keine Formulardaten, die in einem Drittanbieter-Dashboard liegen, das du vergessen hast zu löschen.
Dein Webflow-Kontaktformular ohne eigenes Backend verwalten
Sendform stellt dir einen fertigen Formular-Endpoint zur Verfügung, den du direkt in Webflows Aktionsfeld einfügen kannst - deine Webflow-Formulareinreichungen landen sofort in deinem Posteingang, inklusive Spam-Filterung und DSGVO-freundlichen Voreinstellungen.
Sendform kostenlos testen →
Wenn du Webflows Formular-Aktion auf einen externen Endpoint zeigen lässt, wird der eingebaute Erfolgszustand von Webflow nicht mehr automatisch ausgelöst. Die meisten Formulardienste lösen das, indem sie auf eine von dir festgelegte Danke-Seite weiterleiten. Bei Sendform gibst du eine Weiterleitungs-URL in deinen Formulareinstellungen an, sodass Besucher nach dem Absenden auf deiner eigenen Bestätigungsseite landen. Alternativ kannst du per JavaScript das Formular-Submit-Event abfangen, den POST über fetch() senden und den Webflow-Erfolgszustand manuell anzeigen.
Ja. Unter Projekteinstellungen > Integrationen > Webhooks kannst du einen Webhook hinzufügen, der bei jeder neuen Formulareinreichung ausgelöst wird. Webflow sendet einen JSON-POST an deine angegebene URL mit allen Feldwerten, dem Formularnamen und einem Zeitstempel. Dafür brauchst du einen empfangenden Endpoint - eine serverlose Funktion, einen Pipedream-Workflow oder einen Formulardienst, der Webhooks akzeptiert. Die Webhook-Funktion ist in Webflows CMS- und Business-Tarifen verfügbar.
Zapier sitzt zwischen Webflow und deinem Ziel (E-Mail, CRM usw.) und fügt eine Workflow-Schicht hinzu. Das ist leistungsstark für mehrstufige Automatisierungen, kostet aber Geld über 100 Tasks pro Monat hinaus und stellt einen zusätzlichen Ausfallpunkt dar. Sendform ist ein direkter Formular-Endpoint - Einreichungen gehen direkt vom Browser zu Sendform, das dir sofort eine E-Mail schickt. Es gibt keinen Workflow zu pflegen, keinen Task-Zähler und kein Risiko, dass ein Zap lautlos fehlschlägt. Für einfache Kontaktformulare ist Sendform schneller einzurichten und im Alltag zuverlässiger.
Das hängt vom jeweiligen Dienst ab. Dienste, die Einreichungen in ihrer eigenen Datenbank speichern (Formspree, Basin, Netlify Forms), agieren als Auftragsverarbeiter - das bedeutet, du benötigst einen Auftragsverarbeitungsvertrag und musst sie in deiner Datenschutzerklärung nennen. Sendform ist so konzipiert, dass Einreichungsdaten standardmäßig weitergeleitet und nicht gespeichert werden, was den Compliance-Aufwand erheblich reduziert. Unabhängig vom genutzten Dienst solltest du deine Datenschutzerklärung aktualisieren und erläutern, wie Kontaktformulardaten verarbeitet und übertragen werden.
Ja, und du hast mehrere Möglichkeiten. Die meisten Formulardienste, einschließlich Sendform, beinhalten eine integrierte Spam-Filterung auf ihrer Seite. Du kannst auch ein Honeypot-Feld hinzufügen - ein verstecktes Eingabefeld, das Bots ausfüllen, echte Nutzer aber nicht - und der empfangende Dienst ignoriert Einreichungen, bei denen dieses Feld einen Wert enthält. Für Formulare mit hohem Traffic bieten Dienste mit Unterstützung für reCAPTCHA v3 oder hCaptcha eine zusätzliche Schutzschicht. Webflows eigener Spam-Filter greift nur, wenn du Webflows nativen Formular-Handler verwendest - beim Wechsel auf einen externen Endpoint verlässt du dich also auf die Spam-Tools des jeweiligen Dienstes.
Nein. Das Setzen des Action-Attributs des Formulars auf eine externe URL funktioniert mit jedem Webflow-Tarif, einschließlich des kostenlosen Starter-Tarifs - du änderst damit lediglich ein HTML-Attribut auf einer veröffentlichten Seite. Die Einschränkung bei kostenlosen Tarifen betrifft Webflows eigene Formularverarbeitung (Dashboard-Speicherung, E-Mail-Benachrichtigungen über Webflow), die einen kostenpflichtigen Tarif erfordert. Die Nutzung eines externen Dienstes wie Sendform umgeht diese Einschränkung vollständig - das Formular sendet seinen POST einfach an Sendforms Server, unabhängig von deinem Webflow-Tarif.