Anleitung

Astro-Kontaktformular (kein Backend nötig)

Astro rendert standardmäßig zu statischem HTML, was bedeutet, dass ein Astro-Kontaktformular einfach ein normales HTML-Formular mit dem richtigen action-Attribut ist. Sie benötigen keinen Server-Endpoint oder eine Astro-Integration - fügen Sie das Snippet in eine .astro-Seite ein und Sie sind fertig.

Das Snippet

contact.Astro

---
// src/pages/contact.astro
---

<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <label>
    Email
    <input type="email" name="email" required />
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />

  <button type="submit">Send</button>
</form>

So funktioniert es

Da Astro standardmäßig statisches HTML ausliefert, gibt es nichts Client-seitiges zu verkabeln. Das action des Formulars POSTet direkt an formhook.app/f/YOUR_API_KEY, wobei YOUR_API_KEY aus den Einstellungen Ihres Formulars im Formhook-Dashboard stammt. Das _gotcha-Feld ist ein Honeypot - Bots füllen es aus, Menschen sehen es nicht, und alles mit Inhalt dort wird stillschweigend verworfen. Das _redirect-Feld schickt Nutzer nach erfolgreichem POST zu einer Dankesseite, und die URL wird gegen Ihre Allowed-Origins-Liste validiert.

Eine Danke-Seite nach dem Absenden anzeigen

Ein statisches Astro-Formular verlässt beim Absenden die Seite. Legen Sie deshalb eine Seite wie src/pages/danke.astro an und lassen Sie ein verstecktes _redirect-Feld darauf zeigen. Verwenden Sie die vollständige URL, etwa https://example.com/danke. Der Wert muss eine absolute URL sein, deren Origin in den erlaubten Origins des Formulars steht; sonst ignoriert Formhook ihn, und der Besucher sieht eine JSON-Antwort. Haben Sie site in der astro.config.mjs gesetzt, können Sie den Wert mit new URL("/danke", Astro.site) bilden.

Das Ergebnis anzeigen, ohne die Seite zu verlassen

Soll der Besucher auf der Seite bleiben, fügen Sie der Komponente ein kleines <script> hinzu, das das Submit-Ereignis abfängt, die Felder per fetch als JSON sendet und eine Meldung in ein Statuselement schreibt. Astro liefert dieses Skript unverändert an den Browser aus, es braucht also weder Framework noch Island. Das Muster zeigt der Next.js-Leitfaden; mit barrierefreien Statusmeldungen erklärt es AJAX-Formularübermittlung. JSON-Einsendungen nutzen _redirect nicht.

Erlaubte Origins für Entwicklung, Previews und Produktion

Tragen Sie jede Origin, von der das Formular ausgeliefert wird, unter Erlaubte Origins ein - mit exaktem Schema, Host und Port: http://localhost:4321 für astro dev, Ihre Produktionsdomain mit https:// und die Preview-Domain Ihres Hosts, falls Sie dort testen. Scheitert eine Einsendung mit origin_not_allowed, ist diese Liste die erste Stelle zum Nachsehen.

Dasselbe Setup funktioniert auf Cloudflare Pages, GitHub Pages, Netlify und Vercel, weil der Browser direkt an Formhook sendet und Ihr Host die Einsendung nie sieht.

Aus einem Astro-Endpoint senden

Statische Seiten brauchen nichts weiter. Läuft Ihre Seite im Server- oder Hybrid-Modus und möchten Sie die Einsendung lieber aus einem Endpoint oder einer Astro-Action senden, rufen Sie Formhook im Servercode mit einem X-Auth-Token-Header auf, den Sie in den Formular-Einstellungen erzeugen und in einer reinen Server-Umgebungsvariable halten. Serveranfragen enthalten keinen Origin-Header und werden ohne dieses Token abgelehnt. Details stehen in der Dokumentation.

Spam und Datenschutz

Behalten Sie das versteckte _gotcha-Feld: Bots füllen es aus, und solche Einsendungen werden stillschweigend verworfen. Rate Limits gelten pro IP und pro Formular, und Cloudflare Turnstile ist ein Schalter pro Formular im Dashboard; dieser Leitfaden vergleicht die Optionen. Für Besucher aus der EU ergänzen Sie unter dem Formular einen kurzen Hinweis. Der Leitfaden zum DSGVO-konformen Kontaktformular enthält Formulierungen zum Anpassen.

Was als Nächstes passiert

Einsendung erscheint innerhalb einer Sekunde in Ihrem Formhook-Dashboard.
Push-Benachrichtigung wird auf allen Geräten ausgelöst, auf denen Sie sie aktiviert haben.
Antworten Sie direkt aus dem Dashboard (Pro und höher), ohne Ihre echte E-Mail-Adresse preiszugeben.

Veröffentlichen Sie heute Ihr Astro-Kontaktformular.

Kostenlos registrieren, Formular erstellen, API-Schlüssel einfügen. Fünf Minuten.

Kostenlos starten

Kostenlose Stufe: 5 Formulare · 250 Einsendungen/Monat · Keine Kreditkarte.

Astro-Kontaktformular - FAQ

Benötige ich eine Astro-Integration oder einen Server-Adapter?

Nein. Das Formular sendet direkt an Formhook, also funktioniert es mit der standardmäßigen statischen Astro-Ausgabe. Kein SSR-Modus, kein @astrojs/node-Adapter erforderlich.

Kann ich mehrere Kontaktformulare auf verschiedenen Astro-Seiten haben?

Ja. Erstellen Sie ein Formhook-Formular pro Anwendungsfall - Kontakt, Bewerbungen, Newsletter - und fügen Sie das action jedes Formulars in die richtige .astro-Seite ein. Die kostenlose Stufe deckt fünf Formulare ab.

Wie zeige ich nach dem Senden eine Dankesseite?

Fügen Sie ein verstecktes _redirect-Input hinzu, das auf Ihre Astro-Dankes-Route zeigt. Die URL muss in der Allowed-Origins-Liste des Formulars stehen. Oder, wenn Sie lieber Inline-Erfolg ohne Seiten-Reload zeigen, verwenden Sie das fetch-Muster aus der Next.js- oder SvelteKit-Anleitung.

Anleitungen für andere Frameworks

Migrating from Formspree? See how Formhook compares.