Cloudflare-Pages-Feedback-Formular
Füge deiner Cloudflare-Pages-Seite ein Feedback-Formular hinzu, ganz ohne Worker. Das Formular ist einfaches HTML, das du zusammen mit der Seite deployst, und die Antworten landen in deinem Posteingang. Kein eigenes Backend.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Access Key.
- Füge das obige HTML auf der Seite ein, auf der du Feedback sammeln willst.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Access Key und deploye dann auf Pages.
Cloudflare-Fallstricke
Cloudflare Pages liefert deine statische Seite aus, und ein Formpaste-Formular ist einfach HTML, das du mit ausrollst - kein Worker und kein eigenes Backend. Richte das Formular auf Formpaste, deploye, und Einsendungen landen in deinem Posteingang.
Kein Worker nötig
Pages liefert statische Dateien aus, also funktioniert ein Formular, das an den Formpaste-Endpunkt sendet, ohne Worker und ohne Pages Function. Füge das Markup zu deiner Seite hinzu und deploye wie gewohnt.
Nichts zu binden
Du brauchst keinen KV-Namespace, keine D1-Datenbank und kein Binding, um Einsendungen zu sammeln. Das Formular sendet direkt an Formpaste, also gibt es keinen Zustand, den du selbst speichern musst.
Datei-Uploads deployen genauso
Ein Formular mit Datei-Eingabefeld sendet Multipart-Formulardaten direkt an Formpaste, also funktionieren Uploads bei einem normalen Pages-Deploy ohne zusätzliche Einrichtung deinerseits.
Behalte den versteckten access_key
Lass das generierte, versteckte access_key-Eingabefeld an Ort und Stelle, damit Formpaste weiß, zu welchem Formular die Einsendung gehört.
Worauf es ankommt
Eine Bewertung plus ein Kommentar ist der Sweet Spot
Ein Select für den Wert und ein Textfeld für das Warum geben dir eine Zahl zum Verfolgen und den Kontext dahinter, ohne ein langes Formular.
Lass Leute anonym bleiben
Markiere Name und E-Mail als optional. Feedback ist ehrlicher, wenn es nicht an eine Identität gebunden ist, und Spam wird trotzdem automatisch gefiltert.
Leite Feedback dorthin, wo du es siehst
Leite Einsendungen an einen gemeinsamen Posteingang oder per Webhook an dein Tracking-Tool weiter, damit nichts ungelesen bleibt.
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" 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">Name (optional)
<input type="text" name="name" 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 (optional)
<input type="email" name="email" placeholder="du@beispiel.de" 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">Bewertung
<select name="rating" 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">
<option>5 - Ausgezeichnet</option>
<option>4 - Gut</option>
<option>3 - Okay</option>
<option>2 - Schlecht</option>
<option>1 - Sehr schlecht</option>
</select>
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Dein Feedback
<textarea name="message" required 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>
<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">Feedback senden</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">Cloudflare-Pages-Feedback-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.