HTML-Formular einbinden

Kontaktformular für Astro

Eine statisch gebaute Astro-Seite hat keinen Server, der Formulare annimmt. Statt dafür einen Adapter und Server-Rendering einzurichten, schicken Sie das Formular an FormPost. Wir leiten die Eingaben per E-Mail an Sie weiter.

Vorbereitung: Formular bei FormPost anlegen

Melden Sie sich bei FormPost an, legen Sie ein Formular an und tragen Sie die Domain ein, unter der Ihre Seite erreichbar ist. Danach zeigen wir Ihnen die Adresse Ihres Formulars. Sie ersetzt https://www.formpost.eu/f/abc123 im Code unten – sonst ist nichts anzupassen.

1. Eine Formular-Komponente anlegen

Die Komponente enthält nur HTML und kein JavaScript. Astro liefert sie genau so aus.

src/components/ContactForm.astro
<form action="https://www.formpost.eu/f/abc123" method="POST" data-astro-reload>
  <label for="email">E-Mail</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Nachricht</label>
  <textarea id="message" name="message" required></textarea>

  <input type="text" name="_gotcha" style="display:none;" tabindex="-1" autocomplete="off">

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

2. Die Komponente einbinden

Importieren Sie die Komponente in der Seite, auf der das Formular erscheinen soll.

src/pages/contact.astro
---
import ContactForm from '../components/ContactForm.astro';
---
<ContactForm />

Gut zu wissen

  • Verwenden Sie den ClientRouter (früher View Transitions), übernimmt Astro das Absenden von Formularen selbst. Das Attribut data-astro-reload im Code oben schaltet das für dieses Formular ab, damit es ganz normal an FormPost geht. Ohne ClientRouter schadet es nicht.
  • Übermittlungen nehmen wir nur von der eingetragenen Domain an. Vom lokalen Entwicklungsserver (astro dev auf localhost) aus werden sie abgelehnt; zum Ausprobieren gibt es das Testformular im Kundenbereich.
  • Sie brauchen weder einen Adapter noch Server-Rendering. Das Formular funktioniert mit einem rein statischen Build.

Was FormPost heute nicht kann

  • Formulare werden klassisch abgeschickt, also mit einem Seitenwechsel. Ein Versand per JavaScript im Hintergrund wird derzeit nicht unterstützt.
  • Dateianhänge nehmen wir nicht entgegen.
  • FormPost holt keine Einwilligung Ihrer Besucher ein. Der Hinweis in Ihrer Datenschutzerklärung bleibt Ihre Aufgabe – den Textbaustein dafür finden Sie fertig formuliert bei Ihrem Formular.

Weitere Anleitungen und Vergleiche

Formular anlegen und ausprobieren

Der Free-Tarif reicht für ein Formular mit zehn Benachrichtigungen am Tag und kostet dauerhaft nichts.