Tutorial: ein Kontaktformular in 15 Minuten

In diesem Tutorial bauen Sie ein Kontaktformular in Ihre Website ein. Wenn ein Besucher es absendet,

1. landet die Nachricht in Ihrem Postfach, und mit Antworten schreiben Sie direkt dem Besucher zurück,
2. bekommt der Besucher eine kurze E-Mail „Danke, Ihre Nachricht ist angekommen“,
3. werden Bots gestoppt, bevor sie Sie etwas kosten.

Sie müssen keinen Server schreiben oder betreiben. Das Formular spricht direkt aus dem Browser mit Frontmail – über Ihren öffentlichen Schlüssel. Frontmail prüft, woher die Anfrage kommt, rendert Ihre Vorlage und versendet die E-Mail über Ihr eigenes E-Mail-Konto oder Ihren Anbieter.

Möchten Sie zuerst das Ergebnis sehen?

Die Live-Demo zeigt dieselbe Art von Formular in React, Svelte und Vue – mit dem Code direkt daneben.

Was Sie brauchen

• Ein Frontmail-Konto. Registrieren Sie sich auf app.frontmail.dev – der Free-Tarif genügt. Bestätigen Sie Ihre E-Mail-Adresse, sonst können Sie sich zwar umsehen, aber nichts senden.
• Ein E-Mail-Konto, über das gesendet wird. Ein beliebiges SMTP-Postfach (GMX, Zoho, Ihr Webhoster …), ein Gmail- oder Outlook-Konto oder ein API-Anbieter wie Resend oder Postmark.
• Eine Website, deren HTML Sie bearbeiten können. Eine statische Seite reicht. Zum lokalen Testen genügt auch ein Entwicklungsserver auf localhost.
• Etwa 15 Minuten.

Haben Sie „Erste Schritte“ schon durchlaufen?

Nachdem Sie Ihre Organisation angelegt haben, bietet Ihnen das Dashboard einen kurzen Einrichtungsassistenten an. Er deckt dasselbe ab wie die Schritte 1, 2, 4 und 6 dieses Tutorials. Wenn Sie ihn abgeschlossen haben, überfliegen Sie diese Schritte und konzentrieren sich auf die automatische Antwort und das Formular selbst.

Die Schritte

Jeder Schritt ist kurz und endet mit einem Link zum nächsten.

1. E-Mail-Dienst verbindenLegen Sie fest, über welches Konto oder welchen Anbieter Frontmail Ihre E-Mails sendet.

2. Vorlage für das Kontaktformular erstellenStarten Sie aus der Galerie, prüfen Sie den Empfänger und testen Sie die Vorschau mit Beispieldaten.

3. Automatische Antwort hinzufügenEine zweite Vorlage, die sich beim Besucher bedankt – verknüpft mit der ersten.

4. Ihre Website erlaubenBeschränken Sie Ihren öffentlichen Schlüssel auf Ihre Domain und aktivieren Sie das CAPTCHA.

5. Formular bauenEinfaches HTML plus das Browser-SDK aus dem CDN.

6. Testen und Zustellung verfolgenSenden Sie einen kostenlosen Test, schicken Sie das echte Formular ab und verfolgen Sie es im Verlauf.

Wenig Zeit? Der Schnellstart zeigt denselben Ablauf auf einer Seite, nur ohne Erklärungen.