Astro-Kontaktformular ohne Server
Astro baut standardmäßig statisch, also gibt es keinen Server, der Formulare annimmt. Mailiy übernimmt das. Du brauchst keinen Adapter und kein JavaScript-Framework.
So baust du es ein
- Leg ein kostenloses Konto an, füg deine Website hinzu und kopier den Schlüssel des Formulars.
- Leg die Komponente unten an und ersetz YOUR_ACCESS_KEY.
- Importier sie auf der Kontaktseite und setz <ContactForm /> ein.
- Bau und deploy die Seite und schick einen Test ab.
src/components/ContactForm.astro
---
// src/components/ContactForm.astro
---
<form action="https://mailiy.com/api/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="email" name="email" required>
<textarea name="message" required></textarea>
<input type="checkbox" name="botcheck" style="display:none">
<button>Senden</button>
</form>Was du bei Astro wissen solltest
- Willst du auf der Seite bleiben statt weitergeleitet zu werden, bind zusätzlich das Mailiy-Skript ein (siehe unten).
- Mit React, Vue oder Svelte als Insel kannst du auch deren Beispiele nehmen.
Auf der Seite bleiben
Ohne Skript leitet Mailiy nach dem Absenden auf eine Danke-Seite weiter. Mit dieser Zeile schickt der Browser das Formular im Hintergrund ab und zeigt die Antwort darunter an:
<script src="https://mailiy.com/client/script.js" defer></script>Eigene Texte und Events stehen in den Anleitungen.
Felder, die Mailiy erkennt
Jedes Feld mit Namen erscheint in der E-Mail und im Dashboard. Einige Namen liest Mailiy selbst und steuert damit, wie die Mail aussieht und was danach passiert:
| Name | Wirkung |
|---|---|
subject | Betreff der E-Mail. Ohne das Feld nimmt Mailiy den Betreff aus den Formular-Einstellungen. |
from_name | Absendername, der im Postfach angezeigt wird, etwa der Name deiner Website. |
email / replyto | Adresse der Person, die das Formular ausfüllt. Mit „Antworten“ schreibst du ihr direkt zurück. |
redirect | Adresse, auf die der Browser nach dem Absenden geht, zum Beispiel deine eigene Danke-Seite. |
ccemail / bccemail | Weitere Empfänger in Cc oder Bcc, getrennt mit Semikolon. Es zählen nur Adressen, die in deinem Konto bestätigt sind. |
consent | Checkbox für die Einwilligung. Verlangst du sie im Dashboard, lehnt Mailiy Einsendungen ohne Haken ab. |
botcheck | Unsichtbare Falle für Bots. Bleibt sie leer, ist alles in Ordnung. |
Dateien mitschicken
Mit einem Feld vom Typ file nimmt dein Formular in Astro auch Anhänge an, bis zu fünf Dateien mit zusammen 10 MB. Erlaubt sind PDF, Bilder, Text- und Office-Dateien. Mailiy prüft bei jeder Datei, ob der Inhalt zur Endung passt, und lehnt alles andere ab.
Damit der Browser die Dateien überträgt, braucht das form-Tag zusätzlich enctype="multipart/form-data".
Wenn keine E-Mail ankommt
Mailiy antwortet auf jede Einsendung mit einer Meldung. Meistens steckt eine dieser Ursachen dahinter:
- Falscher Schlüssel. Die Antwort lautet „Invalid access key“. Kopier den Schlüssel noch einmal aus dem Dashboard, ohne Leerzeichen davor oder danach.
- Domain nicht erlaubt. Hast du im Dashboard erlaubte Domains eingetragen, nimmt Mailiy nur Einsendungen von dort an. Subdomains zählen mit. Zum Testen auf einer Vorschau-Adresse trägst du diese vorübergehend dazu.
- Feld ohne Namen. Ein Eingabefeld ohne name-Attribut schickt der Browser gar nicht mit. Es fehlt dann in der E-Mail, ohne dass eine Fehlermeldung erscheint.
- Zu viele Tests hintereinander. Pro Formular und Besucher nimmt Mailiy fünf Einsendungen in der Minute an. Danach kommt „Too many submissions“, und nach kurzer Pause geht es weiter.
- Mail im Spam-Ordner. Schau zuerst in den Spam-Ordner und markier die erste Mail als „Kein Spam“. Steht die Einsendung im Dashboard, hat Mailiy sie angenommen.
- Neuer Empfänger bekommt nichts. Weitere Empfänger bekommen erst Mails, wenn sie ihre Adresse über den Link in der Bestätigungsmail freigegeben haben.
Nach dem Absenden
Jede Einsendung landet im Dashboard. Dort durchsuchst du sie und exportierst sie als CSV. Im Formular stellst du außerdem eine automatische Antwort ein, die an die Adresse aus dem Feld email geht, etwa „Danke, wir melden uns innerhalb von zwei Tagen“.
Soll dein Team die Nachricht auch im Chat sehen, schickt Mailiy sie zusätzlich an Slack, Discord oder Telegram. Für eigene Abläufe gibt es Webhooks, die jede Einsendung als JSON an eine Adresse deiner Wahl senden.
Spam und Datenschutz
Das unsichtbare Feld botcheck ist eine Falle für Bots. Kreuzen sie es an, verwirft Mailiy die Einsendung, ohne sie zu speichern oder zu verschicken. Weitere Filter und ein Captcha schaltest du im Dashboard dazu.
Mailiy läuft auf Servern in Deutschland und setzt keine Tracker. Was du sonst noch für ein DSGVO-konformes Formular brauchst, steht in der DSGVO-Checkliste.
Häufige Fragen
Läuft das auf Netlify, Vercel oder GitHub Pages?
Ja, auf jedem Hoster für statische Seiten. Das Formular sendet direkt an Mailiy, der Hoster muss also keine Formulare annehmen können.
Brauche ich für das Kontaktformular in Astro einen eigenen Server?
Nein. Das Formular sendet an Mailiy, Mailiy verschickt die E-Mail. Du brauchst weder PHP noch SMTP-Zugangsdaten noch Server-Code.
Darf der Schlüssel im Quelltext der Seite stehen?
Ja. Er erlaubt nur, Einsendungen an dieses eine Formular zu schicken. Er gibt keinen Zugriff auf dein Konto. Im Dashboard legst du fest, von welchen Domains Einsendungen angenommen werden.
Was kostet das?
Der kostenlose Tarif enthält 100 Einsendungen im Monat für eine Website. Bezahlte Tarife beginnen bei 9 € im Monat.