Alpine.js-Kommentarformular
Füge jeder Seite mit Alpine.js ein Kommentarformular hinzu, ganz ohne Backend. Der @submit.prevent-Handler postet mit fetch, sodass der Leser bleibt, wo er ist, und Kommentare landen in deinem Posteingang zur Prüfung. Kopiere das Markup und ergänze deinen Zugangsschlüssel.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- Füge das Alpine-Script-Tag und das Markup oben zu deinem Beitrags-Template hinzu.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und veröffentliche.
Alpine.js-Fallstricke
Alpine fügt Verhalten zu Markup hinzu, das du bereits hast. Binde das Script-Tag ein, setze x-data auf das Formular, und ein Submit-Handler postet an Formpaste. Es gibt keinen Build-Schritt, keine Komponenten und kein eigenes Backend.
Es ist ein Script-Tag, kein Build-Schritt
Alpine lädt von einem CDN über ein deferred Script-Tag. Es gibt nichts zu kompilieren und keinen Bundler zu konfigurieren, sodass dasselbe Formular in einer statischen Seite, einem CMS-Template oder einer handgeschriebenen Seite funktioniert.
Das echte action-Attribut behalten
Lass action auf den Formpaste-Endpunkt zeigen. Wenn Alpine nicht lädt, postet der Browser das Formular trotzdem auf dem gewöhnlichen Weg, sodass die Direktiven eine Erweiterung sind und keine Voraussetzung.
x-data hält den State
Halte die kleinen Stücke State direkt am Formular mit x-data, nutze dann @submit.prevent zum Posten und x-show, um eine Dankesmeldung einzublenden. Für ein Formular brauchst du dafür keinen Store und keine zusätzliche Library.
Den versteckten access_key behalten
Lass das generierte versteckte access_key-Feld an seinem Platz, damit Formpaste weiß, zu welchem Formular die Einsendung gehört. Alpine fasst es nicht an.
Worauf es ankommt
Statische Websites haben kein Kommentar-Backend, ein Formular schließt die Lücke
Eine statisch generierte Seite kann Kommentare nicht selbst speichern. Mit Formpaste bekommen sie einen Ort zum Landen, ohne dass du eine Datenbank oder ein CMS hinzufügen musst.
Moderiere, bevor du veröffentlichst
Kommentare ziehen Spam an. Formpaste filtert offensichtlichen Spam und stellt Grenzfälle in einen Ordner, den du prüfst, sodass du entscheidest, was tatsächlich auf der Seite erscheint.
Halte die E-Mail privat
Erfasse die E-Mail der kommentierenden Person für Moderation und Antwort, aber kennzeichne sie als nicht veröffentlicht, damit klar ist, dass sie nicht auf der Website erscheint.
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.
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
<style>[x-cloak] { display: none !important; }</style>
<div x-data="{ sending: false, sent: false }">
<form
action="https://api.formpaste.com/submit"
method="POST"
x-show="!sent"
@submit.prevent="sending = true; await fetch($el.action, { method: 'POST', body: new URLSearchParams(new FormData($el)) }); sending = false; sent = true" 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
<input type="text" name="name" 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" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">E-Mail (wird nicht veröffentlicht)
<input type="email" name="email" placeholder="du@beispiel.de" 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" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Kommentar
<textarea name="comment" 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" :disabled="sending">Kommentar posten</button>
</form>
<p x-show="sent" x-cloak>Thanks - your message was sent.</p>
</div>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">Alpine.js-Kommentarformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.