Webflow-Formulare per E-Mail empfangen
Du behältst dein Formular-Design aus dem Designer und änderst nur, wohin es sendet. Webflow bietet dafür im Form Block die Felder Action und Method.
So baust du es ein
- Leg ein kostenloses Konto an, füg deine Website hinzu und kopier den Schlüssel des Formulars.
- Wähl den Form Block aus und öffne seine Einstellungen.
- Trag als Action https://mailiy.com/api/submit ein und als Method POST.
- Zieh ein Code-Embed in das Formular und füg dort das versteckte Feld access_key und den Honeypot aus dem Code unten ein.
- Veröffentliche die Seite und teste das Formular auf der veröffentlichten Domain.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="checkbox" name="botcheck" style="display:none">Was du bei Webflow wissen solltest
- Gib jedem Eingabefeld einen Namen. Er erscheint als Feldname in der E-Mail.
- Die Erfolgs- und Fehlermeldung von Webflow erscheint nicht, weil Mailiy die Antwort schickt. Willst du auf der Seite bleiben, bind zusätzlich das Mailiy-Skript ein (siehe unten).
Auf der Seite bleiben
Ohne Skript leitet Mailiy nach dem Absenden auf eine Danke-Seite weiter. Mit dieser Zeile schickt der Browser das Formular im Hintergrund ab und zeigt die Antwort darunter an:
<script src="https://mailiy.com/client/script.js" defer></script>Eigene Texte und Events stehen in den Anleitungen.
Felder, die Mailiy erkennt
Jedes Feld mit Namen erscheint in der E-Mail und im Dashboard. Einige Namen liest Mailiy selbst und steuert damit, wie die Mail aussieht und was danach passiert:
| Name | Wirkung |
|---|---|
subject | Betreff der E-Mail. Ohne das Feld nimmt Mailiy den Betreff aus den Formular-Einstellungen. |
from_name | Absendername, der im Postfach angezeigt wird, etwa der Name deiner Website. |
email / replyto | Adresse der Person, die das Formular ausfüllt. Mit „Antworten“ schreibst du ihr direkt zurück. |
redirect | Adresse, auf die der Browser nach dem Absenden geht, zum Beispiel deine eigene Danke-Seite. |
ccemail / bccemail | Weitere Empfänger in Cc oder Bcc, getrennt mit Semikolon. Es zählen nur Adressen, die in deinem Konto bestätigt sind. |
consent | Checkbox für die Einwilligung. Verlangst du sie im Dashboard, lehnt Mailiy Einsendungen ohne Haken ab. |
botcheck | Unsichtbare Falle für Bots. Bleibt sie leer, ist alles in Ordnung. |
Dateien mitschicken
Mit einem Feld vom Typ file nimmt dein Formular in Webflow auch Anhänge an, bis zu fünf Dateien mit zusammen 10 MB. Erlaubt sind PDF, Bilder, Text- und Office-Dateien. Mailiy prüft bei jeder Datei, ob der Inhalt zur Endung passt, und lehnt alles andere ab.
Damit der Browser die Dateien überträgt, braucht das form-Tag zusätzlich enctype="multipart/form-data".
Wenn keine E-Mail ankommt
Mailiy antwortet auf jede Einsendung mit einer Meldung. Meistens steckt eine dieser Ursachen dahinter:
- Falscher Schlüssel. Die Antwort lautet „Invalid access key“. Kopier den Schlüssel noch einmal aus dem Dashboard, ohne Leerzeichen davor oder danach.
- Domain nicht erlaubt. Hast du im Dashboard erlaubte Domains eingetragen, nimmt Mailiy nur Einsendungen von dort an. Subdomains zählen mit. Zum Testen auf einer Vorschau-Adresse trägst du diese vorübergehend dazu.
- Feld ohne Namen. Ein Eingabefeld ohne name-Attribut schickt der Browser gar nicht mit. Es fehlt dann in der E-Mail, ohne dass eine Fehlermeldung erscheint.
- Zu viele Tests hintereinander. Pro Formular und Besucher nimmt Mailiy fünf Einsendungen in der Minute an. Danach kommt „Too many submissions“, und nach kurzer Pause geht es weiter.
- Mail im Spam-Ordner. Schau zuerst in den Spam-Ordner und markier die erste Mail als „Kein Spam“. Steht die Einsendung im Dashboard, hat Mailiy sie angenommen.
- Neuer Empfänger bekommt nichts. Weitere Empfänger bekommen erst Mails, wenn sie ihre Adresse über den Link in der Bestätigungsmail freigegeben haben.
Nach dem Absenden
Jede Einsendung landet im Dashboard. Dort durchsuchst du sie und exportierst sie als CSV. Im Formular stellst du außerdem eine automatische Antwort ein, die an die Adresse aus dem Feld email geht, etwa „Danke, wir melden uns innerhalb von zwei Tagen“.
Soll dein Team die Nachricht auch im Chat sehen, schickt Mailiy sie zusätzlich an Slack, Discord oder Telegram. Für eigene Abläufe gibt es Webhooks, die jede Einsendung als JSON an eine Adresse deiner Wahl senden.
Spam und Datenschutz
Das unsichtbare Feld botcheck ist eine Falle für Bots. Kreuzen sie es an, verwirft Mailiy die Einsendung, ohne sie zu speichern oder zu verschicken. Weitere Filter und ein Captcha schaltest du im Dashboard dazu.
Mailiy läuft auf Servern in Deutschland und setzt keine Tracker. Was du sonst noch für ein DSGVO-konformes Formular brauchst, steht in der DSGVO-Checkliste.
Häufige Fragen
Sehe ich die Einsendungen weiter in Webflow?
Nein. Sobald die Action auf Mailiy zeigt, gehen die Daten an Mailiy statt an Webflow. Du findest sie im Mailiy-Dashboard und als E-Mail, die Liste in Webflow bleibt leer.
Brauche ich für das Kontaktformular in Webflow einen eigenen Server?
Nein. Das Formular sendet an Mailiy, Mailiy verschickt die E-Mail. Du brauchst weder PHP noch SMTP-Zugangsdaten noch Server-Code.
Darf der Schlüssel im Quelltext der Seite stehen?
Ja. Er erlaubt nur, Einsendungen an dieses eine Formular zu schicken. Er gibt keinen Zugriff auf dein Konto. Im Dashboard legst du fest, von welchen Domains Einsendungen angenommen werden.
Was kostet das?
Der kostenlose Tarif enthält 100 Einsendungen im Monat für eine Website. Bezahlte Tarife beginnen bei 9 € im Monat.