So fügen Sie Cloudflare Pages ein Kontaktformular hinzu

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:

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

1. Registrieren Sie sich und erstellen Sie ein Formular im Dashboard - keine Karte nötig.
2. Kopieren Sie die eindeutige URL des Formulars (sie sieht aus wie https://formhook.app/f/fh_xxxxxxxx).
3. Fügen Sie sie in das action-Attribut Ihres bestehenden <form> ein.
4. 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.