Alpine.js-Warteliste
Füge deiner Landingpage mit Alpine.js ein Wartelisten-Formular hinzu, ganz ohne Backend. Ein E-Mail-Feld, ein Script-Tag, und Anmeldungen landen in deinem Posteingang. 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 deiner Landingpage 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
Zeig einen Erfolgsstatus
Eine Wartelisten-Anmeldung sollte sofort bestätigt werden. Verfolge den Status, nachdem das Submit abgeschlossen ist, und tausche das Formular gegen eine Meldung wie Du stehst auf der Liste aus.
Empfehlungsposition ist optional
Du kannst später ein Feld für einen Empfehlungscode ergänzen, aber blockiere die eigentliche Anmeldung nicht damit. Beschränke die erste Version auf E-Mail und Name.
Dedupliziere auf deiner Seite
Dieselbe Person kann sich zweimal anmelden. Behandle die E-Mail als Schlüssel, wenn du die Liste exportierst oder synchronisierst.
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">E-Mail
<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">Name
<input type="text" name="name" placeholder="Dein 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>
<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">Der Warteliste beitreten</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-Warteliste FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.