# HTML-Kontaktformular ohne Backend: ein funktionierendes Beispiel

Erstellen Sie ein statisches HTML-Kontaktformular, das ohne PHP oder einen eigenen Server an E-Mail und Telegram sendet. Enthält ein kopierbares Formular, Weiterleitungen und Zustellungsprüfungen.

Author: Formgong
Published: 2026-10-01
Language: de
Canonical: https://formgong.com/de/blog/html-contact-form-without-backend/

Ein statisches HTML-Kontaktformular kann auch ohne ein von Ihnen verwaltetes Backend funktionieren: Legen Sie method="POST", als action die Formgong-Adresse /submit und ein verstecktes Feld access_key fest. Nach der E-Mail-Verifizierung empfängt der Dienst die Einsendungen und versendet Benachrichtigungen. Die reine HTML-Version erfordert kein JavaScript.

## 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](/de/#top), 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.

Verifizieren Sie Ihre E-Mail-Adresse, bevor Sie die Zustellung testen: Einsendungen für ein nicht verifiziertes Konto werden möglicherweise bis zur Bestätigung zurückgehalten.

## 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.

```html
<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](/de/blog/contact-form-not-sending-email/) enthält ein Beispiel zur Überprüfung der Antwort.

## 4. Testen Sie das veröffentlichte Formular

- Öffnen Sie die Website unter ihrer tatsächlichen Domain, füllen Sie das Formular manuell aus und senden Sie eine erkennbare Testnachricht.

- Öffnen Sie im Dashboard den Bereich „Einsendungen“ dieses Formulars. Überprüfen Sie die Nachricht und alle zusätzlichen Felder.

- Überprüfen Sie die E-Mail des Empfängers, einschließlich des Spam-Ordners.

- 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](/de/blog/website-form-to-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](/de/docs/html/).

## Häufig gestellte Fragen

### Kann ein HTML-Formular ohne JavaScript funktionieren?

Ja. Ein Formular mit „method=POST“ und einer Formgong-Aktion wird vom Browser übermittelt. Die Antwort öffnet eine Ergebnisseite oder Ihre konfigurierte Danke-Seite.

### Benötigt ein statisches Kontaktformular PHP?

Nein, wenn ein externer Dienst die Daten empfängt. In diesem Beispiel übernimmt Formgong die Verarbeitung, sodass Ihr Website-Hosting weder PHP noch eine benutzerdefinierte API benötigt.

### Darf access_key im HTML stehen?

Ja. Es handelt sich um einen öffentlichen Übermittlungsschlüssel. Er gewährt weder Zugriff auf den Posteingang noch die Berechtigung, Einstellungen zu ändern.

### Funktioniert dieses Beispiel, wenn Turnstile aktiviert ist?

Das Beispiel enthält einen Honeypot. Falls das Formular Turnstile erfordert, fügen Sie das aktuelle Widget und das cf-turnstile-response-Token unter „Website einbinden“ hinzu.

## Quellen und Dokumentation

- [MDN: sending form data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
- [Formgong-Dokumentation](https://formgong.com/de/docs/html/)

[Formularschlüssel holen](https://formgong.com/de/#top)