Formpaste

Alpine.js-Feedbackformular

Füge jeder Seite mit Alpine.js ein Feedback-Widget hinzu, ganz ohne Backend. Ein Script-Tag, x-data für den State, und Antworten landen in deinem Posteingang. Kopiere das Markup und ergänze deinen Zugangsschlüssel.

So baust du es

  1. Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
  2. Füge das Alpine-Script-Tag und das Markup oben zu deiner Seite hinzu.
  3. 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

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.

1

Formular erstellen

Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.

2

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 (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" :disabled="sending">Feedback senden</button>
  </form>
  <p x-show="sent" x-cloak>Thanks - your message was sent.</p>
</div>
3

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-Feedbackformular FAQ

Formular einfügen. Einsendungen erhalten.

Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.

Kostenlos startenDokumentation lesen

Andere Alpine.js-Formulare

Kommentar
Warteliste