Zum Inhalt springen

Kontaktformular für die Website ohne Backend erstellen

Ein einfaches HTML-Kontaktformular, das Ihnen jede Nachricht per E-Mail schickt – ohne Server, ohne PHP, ohne Plugin. Funktioniert auf jeder statischen Website, von handgeschriebenem HTML bis Astro, Hugo oder WordPress.

Aktualisiert:

Das Video ist auf Englisch; die Schritte unten sind das vollständige Tutorial.

Sie bauen ein ganz normales HTML-Formular, das jede Einsendung in Ihr Postfach schickt. Die E-Mail versendet Frontmail über das Postfach, das Sie ohnehin nutzen (Gmail, Outlook, einen beliebigen SMTP-Server oder einen Transaktions-Anbieter) – Sie müssen also keinen eigenen Server betreiben.

Sie brauchen: ein kostenloses Frontmail-Konto und etwa zehn Minuten.

1. Postfach verbinden

  1. Öffnen Sie im Dashboard E-Mail-Dienste und klicken Sie auf Dienst hinzufügen.
  2. Wählen Sie Ihren Anbieter. Gmail und Outlook verbinden Sie mit Ihrem Konto (es wird kein Passwort gespeichert); SMTP, Resend, Postmark, Mailgun und andere brauchen einen API-Schlüssel oder Zugangsdaten.
  3. Aktivieren Sie Als Standard festlegen und klicken Sie auf Prüfen & speichern. Frontmail prüft die Zugangsdaten, ohne etwas zu versenden.

2. Vorlage aus der Galerie anlegen

  1. Öffnen Sie Vorlagen → Aus der Galerie und wählen Sie Kontaktformular (Kategorie Formulare).
  2. Klicken Sie auf Vorlage verwenden. To ist Ihre eigene Adresse und Reply-To der Besucher – mit Antworten schreiben Sie ihm also direkt zurück.

Die Vorlage erwartet diese Parameter – sie werden zu den name-Attributen Ihrer Formularfelder:

Parameter Pflicht Bedeutung
name ja Name des Besuchers
email ja Adresse des Besuchers (wird validiert)
phone nein Telefonnummer
topic nein Thema, erscheint im Betreff
message ja Die Nachricht

3. Website freigeben

Ihr öffentlicher Schlüssel steht im Quelltext der Seite, und das ist in Ordnung – nutzen darf ihn aber nur Ihre Website.

  1. Öffnen Sie Sicherheit und tragen Sie Ihre Domain unter Erlaubte Websites ein (zum Beispiel example.com und www.example.com; während der Entwicklung zusätzlich localhost). Klicken Sie auf Speichern.
  2. Empfohlen: Legen Sie ein kostenloses Cloudflare-Turnstile-Widget für Ihre Hostnamen an, fügen Sie dessen Site Key und Secret Key unter Sicherheit → Bot-Schutz ein und klicken Sie auf CAPTCHA für alle Vorlagen aktivieren. Bots können Ihr Formular dann nicht mehr nutzen, und für Menschen ist die Prüfung meist unsichtbar.

4. Formular in die Seite einbauen

Kopieren Sie den öffentlichen Schlüssel (Sicherheit) und die Vorlagen-ID (Tab Snippets der Vorlage) und fügen Sie dann diesen Code dort ein, wo das Formular erscheinen soll:

<form id="contact">
  <label>Name <input name="name" required maxlength="200" /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Message <textarea name="message" required></textarea></label>
  <!-- Turnstile adds a hidden cf-turnstile-response field; leave it out if you skipped the CAPTCHA -->
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Send</button>
  <p id="form-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('contact');
  const status = document.getElementById('form-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      // null = your default service
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thank you! We’ll get back to you soon.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset(); // a Turnstile token works only once
    }
  });
</script>

sendForm() liest die Felder anhand ihres name, sodass Formular und Vorlage ohne jeglichen Zuordnungscode zusammenpassen. Netzwerkfehler und kurze Serverstörungen werden automatisch mit demselben Idempotenzschlüssel wiederholt – ein Besucher schickt Ihnen dieselbe Nachricht also nie zweimal.

5. Testen

Öffnen Sie die Seite, füllen Sie das Formular aus und senden Sie es ab. Die E-Mail ist innerhalb von Sekunden in Ihrem Postfach, und unter Verlauf im Dashboard sehen Sie die Nachricht mit ihrem vollständigen Zeitverlauf.

Wenn etwas nicht klappt, verrät Ihnen der Fehler den Grund:

  • origin_not_allowed – die Domain der Seite steht nicht unter Erlaubte Websites (prüfen Sie www und den Port).
  • captcha_required – die Vorlage verlangt Turnstile, aber das Widget fehlt im Formular.
  • invalid_template_params – ein Pflichtfeld ist leer oder ein Wert passt nicht zum Parameter.

Credits in einer arbeitsreichen Woche aufgebraucht? Die Nachricht geht nicht verloren: Sie wird mit dem Status held angenommen und automatisch versendet, sobald Sie Credits nachkaufen.

Nächste Schritte

  • Schicken Sie dem Besucher eine Bestätigung: Legen Sie die Vorlage Automatische Antwort: Danke für Ihre Nachricht aus der Galerie an und wählen Sie sie in der Kontaktvorlage unter Einstellungen → Zustellung aus.
  • Sie nutzen React, Vue oder Svelte? Die Framework-Pakete enthalten eine fertige FrontmailForm-Komponente mit eingebautem Turnstile-Widget – siehe SDK-Dokumentation.

Weitere Tutorials

Alle Tutorials