Blog
So fügen Sie Cloudflare Pages ein Kontaktformular hinzu
· 3 Min. Lesezeit
Cloudflare Pages ist ein schneller, großzügiger statischer Host - Repo pushen, globales Deployment erhalten, fertig. Was es nicht hat, ist etwas wie Netlify Forms: keinen integrierten Dienst, der Ihr HTML nach einem <form>-Tag durchsucht und beginnt, Einsendungen zu sammeln. Deployen Sie ein einfaches HTML-Kontaktformular unverändert auf Cloudflare Pages, geht das POST ins Leere. Hier ist, warum - und die zwei Wege, es zu beheben.
Warum Cloudflare Pages kein natives Formular-Produkt hat
Cloudflare Pages ist ein Host für statische Dateien mit einer optionalen Functions-Schicht für dynamische Routen - keine Plattform zur Formularverarbeitung. Netlifys Formular-Funktion funktioniert, indem sie Ihr Build-Ergebnis beim Deployment analysiert und für jedes gefundene Formular ein verstecktes Backend bereitstellt; Cloudflare Pages führt keine solche Analyse durch. Ihre Build-Artefakte sind schlicht Dateien auf einem CDN. Wenn ein Formular irgendwohin Daten senden muss, müssen Sie dieses Irgendwo selbst bauen oder sich ausleihen. Das ist keine Lücke, die Cloudflare vermutlich schließen wird - Pages ist bewusst auf statische Assets plus eine dünne Serverless-Schicht beschränkt, nicht auf eine Formular-Parsing-Pipeline.
Option 1: eine eigene Pages Function schreiben
Cloudflare Pages unterstützt Functions - kleine Workers-artige Handler, die in einem /functions-Verzeichnis liegen und am Edge von Cloudflare laufen. Sie könnten eine functions/api/contact.ts hinzufügen, die den POST-Body liest, validiert, Spam filtert, eine E-Mail versendet (über die API eines Anbieters, da Workers keine rohen SMTP-Verbindungen aufbauen können) und vielleicht in KV oder D1 speichert. Das funktioniert, und alles bleibt in einem Cloudflare-Projekt. Aber jetzt pflegen Sie Validierung, Spam-Filterung, Speicherung und E-Mail-Zustellung selbst - genau das Backend, das ein statischer Host Ihnen eigentlich ersparen sollte.
Option 2: das Formular auf ein gehostetes Backend richten (empfohlen)
Der schnellere Weg ist, das POST an einen genau dafür gebauten Dienst zu senden. Behalten Sie Ihr Markup, fügen Sie ein Attribut hinzu:
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
<input type="text" name="name" required />
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>Das ist die gesamte Integration. Keine Function, kein Worker, keine E-Mail-API-Schlüssel zu verwalten. Einsendungen erscheinen in einem Dashboard und können eine Web-Push-Benachrichtigung auslösen - auch auf iOS, sobald die Seite zum Home-Bildschirm hinzugefügt wurde. Spam-Schutz ist standardmäßig aktiv: Ein Honeypot-Feld und Rate-Limiting fangen das meiste ab, bevor es Sie erreicht, und Sie können Cloudflare Turnstile ergänzen - Cloudflares eigenes datenschutzfreundliches CAPTCHA, eine passende Ergänzung für ein Formular auf einer Cloudflare-Pages-Seite - für alles, was stärker ins Visier gerät. Einsendungen und hochgeladene Dateien werden auf EU-Infrastruktur gespeichert. Nichts davon hängt davon ab, wie der Rest der Seite gebaut ist: Astro, einfaches HTML, ein statischer Next.js-Export, Hugo, egal was das Markup generiert, das Formular-Tag bleibt gleich und das Deployment ändert sich nicht.
So erhalten Sie Ihren Endpunkt
- Registrieren Sie sich und erstellen Sie ein Formular im Dashboard - keine Karte nötig.
- Kopieren Sie die eindeutige URL des Formulars (sie sieht aus wie
https://formhook.app/f/fh_xxxxxxxx). - Fügen Sie sie in das
action-Attribut Ihres bestehenden<form>ein. - Committen und deployen wie gewohnt.
Die kostenlose Stufe deckt 250 Einsendungen pro Monat ab - für die meisten Kontaktformulare reichlich. Sehen Sie sich die Preisseite an, um zu erfahren, was Pro bietet, falls Sie später Datei-Uploads oder eine verifizierte Absender-Domain brauchen.
Ein funktionierendes Formular in einer Zeile
In der EU gehostet, Einsendungen für immer aufbewahrt, Push-Benachrichtigungen in jeder Stufe.
Kostenlos startenKeine Kreditkarte · Dokumentation lesen
Weiterlesen
- Netlify-Forms-Alternative: ein Formular-Backend für jeden HostNetlify Forms funktioniert nur auf Netlify. Warum das Ihre Formulare an den Host bindet und wie ein hostunabhängiges Formular-Backend das Problem löst.
- So fügen Sie GitHub Pages ein Kontaktformular hinzuGitHub Pages kann keinen Server-Code ausführen, trotzdem geht ein Kontaktformular. Drei Ansätze im Vergleich, plus eine Copy-paste-Lösung in einer Minute.
- Serverless-Kontaktformular: was das wirklich bedeutet„Serverless“ meint zwei Setups: eine Funktion, die Sie schreiben, oder ein Backend, das Sie nie schreiben. Hier der eigentliche Unterschied.