HTML-Kontaktformular ohne Backend: ein funktionierendes Beispiel

Was „ohne Backend“ bedeutet

Ein Browser kann ein HTML-Formular auch ohne JavaScript absenden, doch die Daten müssen dennoch von einer Instanz empfangen, gespeichert und als Benachrichtigungen weitergeleitet werden. Diese Aufgabe übernimmt hier Formgong. Sie müssen weder ein PHP-Skript noch eine API oder eine Datenbank verwalten; es gibt jedoch weiterhin einen Verarbeitungsserver, der vom Formular-Dienst betrieben wird.

Dies eignet sich für eine Landingpage, ein Portfolio oder eine statische Website mit Textfeldern. Wenn Sie bereits über ein Backend mit Authentifizierung und komplexen Geschäftsregeln verfügen, kann es sinnvoll sein, das Formular dort zu verarbeiten. Wählen Sie für Dateien einen separaten Workflow: In diesem Beispiel werden ausschließlich Textdaten gesendet.

1. Beziehen Sie den Schlüssel für Ihr Formular

Öffnen Sie Formgong, geben Sie Ihre E-Mail-Adresse ein und verifizieren Sie diese über den Link in Ihrem Posteingang. Öffnen Sie anschließend Ihr Formular im Dashboard und den Abschnitt „Website einbinden“. Kopieren Sie den öffentlichen Schlüssel für Einsendungen.

Ersetzen Sie im folgenden Code fk_your_access_key durch diesen Wert. Der Schlüssel ermöglicht die Einsendung von Formularen, gewährt jedoch keinen Zugriff auf den Posteingang und erlaubt keine Änderungen an den Einstellungen. Er kann in HTML eingebunden werden. Sie benötigen hier weder das Geheimnis eines E-Mail-Anbieters noch ein Telegram-Bot-Token.

2. Fügen Sie den HTML-Code in Ihre Website ein

Fügen Sie diesen Code in den Kontaktbereich Ihrer Seite ein. Er enthält keine visuellen Stile; fügen Sie den Feldern und der Schaltfläche eigene Klassen hinzu, damit sie zum Erscheinungsbild der Website passen. Sie können die Beschriftungen übersetzen. Behalten Sie die Feldnamen name, email und message bei.

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <label>Name <input type="text" name="name" autocomplete="name" placeholder="Your name" required></label>
  <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>Message <textarea name="message" placeholder="How can we help?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">Send</button>
</form>

Warum Methode, Aktion und Name wichtig sind

method="POST" sendet Felder im Request-Body. action legt den empfangenden Endpoint fest. Das Attribut name jedes Felds legt fest, was gesendet wird; ein id allein reicht nicht aus. Verwenden Sie für ein Telefonfeld einen Namen wie name="phone".

botcheck ist eine Bot-Falle. Halten Sie es außerhalb des Bildschirms und leer; machen Sie es nicht zu einem sichtbaren Pflichtfeld. Wenn es ausgefüllt wird, kann Formgong die Anfrage als Spam einstufen, ohne Benachrichtigungen zu versenden.

Ein einfaches Formular braucht kein fetch. Der Browser sendet die Daten und leitet zum Ergebnisbildschirm weiter. required und type="email" helfen den Besuchern beim Ausfüllen, ersetzen jedoch nicht die Prüfungen des Dienstes.

3. Wählen Sie die Seite nach der Einsendung aus

Ohne zusätzliche Konfiguration öffnet der Browser die Ergebnisseite von Formgong. Um Ihre eigene Danke-Seite zu verwenden, veröffentlichen Sie diese auf Ihrer Website und geben Sie deren vollständige HTTPS-URL in den Weiterleitungseinstellungen Ihres Formulars ein.

Alternativ fügen Sie ein verstecktes Feld _redirect mit der vollständigen Seiten-URL hinzu. Wenn das Dashboard so eingestellt ist, dass Weiterleitungsadressen aus dem Code ignoriert werden, hat die URL in den Einstellungen Vorrang. Sie können außerdem _error_redirect für Fehler festlegen.

Möchten Sie, dass Besucher auf derselben Seite bleiben? Ergänzen Sie JavaScript mit fetch und eindeutigen Zuständen für das Absenden. Der Leitfaden zur Fehlerbehebung bei der Übermittlung enthält ein Beispiel zur Überprüfung der Antwort.

4. Testen Sie das veröffentlichte Formular

1. Öffnen Sie die Website unter ihrer tatsächlichen Domain, füllen Sie das Formular manuell aus und senden Sie eine erkennbare Testnachricht.
2. Öffnen Sie im Dashboard den Bereich „Einsendungen“ dieses Formulars. Überprüfen Sie die Nachricht und alle zusätzlichen Felder.
3. Überprüfen Sie die E-Mail des Empfängers, einschließlich des Spam-Ordners.
4. Wiederholen Sie den Vorgang auf einem Smartphone: Die Beschriftungen, die E-Mail-Tastatur, die Schaltfläche und die Danke-Seite sollten funktionsfähig sein.

Für einen weiteren Benachrichtigungskanal verbinden Sie Telegram. Das Ändern von Empfängern oder Weiterleitungen in Formgong erfordert keine erneute Veröffentlichung Ihrer HTML-Website.

Bevor Sie zusätzlichen Schutz aktivieren

Wenn Sie Turnstile aktivieren, aktualisieren Sie den Code unter „Website einbinden“. Das Formular benötigt ein Widget mit dem aktuellen Website-Schlüssel und ein Feld cf-turnstile-response. Das obige Beispiel enthält lediglich einen Honeypot und reicht nicht aus, wenn Turnstile bereits erforderlich ist.

Wenn Sie zulässige Domains konfigurieren, geben Sie die tatsächliche Domain der Website an. Tests in einem Editor oder auf einer anderen Vorschau-Domain können zu abweichenden Ergebnissen führen. Die vollständige Anleitung zur Einrichtung finden Sie in der Dokumentation zur HTML-Einbindung.