Kontaktformular HTML Code zum Kopieren, mit echter Erfolgsprüfung

Der vollständige Code

Formular, Spamschutz und Statusmeldung in einem Block. Fügen Sie ihn dort ein, wo das Formular erscheinen soll: in eine HTML-Datei, einen Block „Individuelles HTML“ in WordPress oder ein Code-Element Ihres Baukastens.

1. Legen Sie auf formgong.com ein kostenloses Konto an und kopieren Sie den öffentlichen Schlüssel Ihres Formulars.
2. Ersetzen Sie im Code fk_your_access_key durch diesen Schlüssel und /datenschutz durch die Adresse Ihrer Datenschutzerklärung.
3. Veröffentlichen Sie die Seite und senden Sie eine Testnachricht. Sie kommt an die E-Mail-Adresse Ihres Kontos.

<form id="kontakt" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="de">
  <input type="hidden" name="_subject" value="Neue Anfrage über die Website">

  <label for="k-name">Name</label>
  <input id="k-name" name="name" autocomplete="name" required>

  <label for="k-email">E-Mail</label>
  <input id="k-email" type="email" name="email" autocomplete="email" required>

  <label for="k-telefon">Telefon (optional)</label>
  <input id="k-telefon" type="tel" name="phone" autocomplete="tel">

  <label for="k-nachricht">Nachricht</label>
  <textarea id="k-nachricht" name="message" rows="6" required></textarea>

  <!-- Honeypot: für Menschen unsichtbar, Bots füllen es aus -->
  <div aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden">
    <label for="k-botcheck">Dieses Feld bitte leer lassen</label>
    <input id="k-botcheck" type="text" name="botcheck" tabindex="-1" autocomplete="off">
  </div>

  <button type="submit">Nachricht senden</button>
  <p id="kontakt-status" role="status" tabindex="-1"></p>
  <small>Wir verwenden Ihre Angaben nur, um Ihnen zu antworten. Mehr dazu in unserer <a href="/datenschutz">Datenschutzerklärung</a>.</small>
</form>

<script>
const kontakt = document.getElementById("kontakt");
const statusZeile = document.getElementById("kontakt-status");

kontakt.addEventListener("submit", async (event) => {
  event.preventDefault();
  const button = kontakt.querySelector("button[type=submit]");
  button.disabled = true;
  statusZeile.textContent = "Wird gesendet…";
  try {
    const response = await fetch(kontakt.action, {
      method: "POST",
      body: new FormData(kontakt),
      headers: { Accept: "application/json" },
    });
    const data = await response.json();
    if (data.success === true) {
      kontakt.reset();
      statusZeile.textContent = "Danke! Ihre Nachricht ist angekommen.";
    } else {
      statusZeile.textContent = data.message || "Nicht gesendet. Bitte versuchen Sie es noch einmal.";
    }
  } catch {
    statusZeile.textContent = "Nicht gesendet. Bitte prüfen Sie Ihre Verbindung und versuchen Sie es erneut.";
  }
  button.disabled = false;
  statusZeile.focus();
});
</script>

Der Schlüssel ist öffentlich und darf im Quelltext stehen: Mit ihm kann man nur Nachrichten an Ihr Formular schicken, nicht Ihre Einsendungen lesen.

Was die einzelnen Teile tun

• action und method="POST": wohin der Browser die Felder schickt. Ohne method sendet ein Formular per GET und hängt alle Eingaben an die Adresse an.
• access_key: ordnet die Nachricht Ihrem Formular zu. _lang stellt die Meldungen von Formgong auf Deutsch, _subject legt den Betreff der E-Mail fest.
• name-Attribute: Nur Felder mit name werden gesendet. Was im Feld name="message" steht, steht in der E-Mail unter „message“.
• <label for> und id: verbinden Beschriftung und Feld. Screenreader lesen die Beschriftung vor, und ein Klick auf das Wort setzt den Cursor ins Feld. Ein Platzhalter im Feld ersetzt keine Beschriftung, denn er verschwindet beim Tippen.
• autocomplete: Browser füllen Name, E-Mail und Telefon selbst aus.
• required: Der Browser lässt das Formular ohne diese Felder nicht los. Das Telefonfeld ist bewusst optional; fragen Sie nur ab, was Sie für die Antwort brauchen.
• role="status": Screenreader sagen die Statusmeldung an, ohne dass jemand danach suchen muss.

Warum der Code auf success === true prüft

Die entscheidende Zeile ist if (data.success === true). Formgong antwortet auf jede Einsendung mit JSON. Bei Erfolg steht darin "success": true, bei einem Fehler "success": false und eine Meldung, zum Beispiel bei einem falschen Schlüssel „Dieser Zugriffsschlüssel existiert nicht.“ (Status 404). Der Code zeigt diese Meldung an, statt „Danke“ zu sagen.

Viele Beispiele im Netz zeigen die Dankesmeldung, sobald man auf „Senden“ klickt, oder prüfen nur, ob überhaupt eine Antwort kam. Wer so eine Meldung sieht, hat keinen Grund, es noch einmal zu versuchen, und Sie erfahren nie von der Anfrage. In unserem Test von 105 KI-gebauten Websites meldeten 27 Formulare Erfolg und sendeten nichts (die Studie).

Bricht die Verbindung ab, landet der Code im catch-Zweig und sagt das auch so. Läuft die Anfrage ins Leere und Sie sehen in der Konsole „Failed to fetch“, hilft der Ratgeber „Failed to fetch“ im Kontaktformular.

So haben wir den Code getestet

Am 20. Oktober 2026 haben wir genau diesen Code in Chrome von einer lokalen Testseite an https://formgong.com/submit gesendet, mit einem Wegwerf-Formular in einem Formgong-Testkonto:

• mit dem echten Schlüssel: Statuszeile „Danke! Ihre Nachricht ist angekommen.“, und die Einsendung stand im Posteingang des Formulars, nicht als Spam markiert;
• mit dem Platzhalter fk_your_access_key: Statuszeile „Dieser Zugriffsschlüssel existiert nicht.“, keine Dankesmeldung, nichts gespeichert;
• mit einer Adresse, die nicht erreichbar ist (der Fall „keine Verbindung“): Statuszeile „Nicht gesendet. Bitte prüfen Sie Ihre Verbindung und versuchen Sie es erneut.“, die Eingaben blieben im Formular.

Zur Gegenprobe haben wir die Prüfung testweise durch if (true) ersetzt. Mit dem falschen Schlüssel zeigte das Formular dann „Danke! Ihre Nachricht ist angekommen.“, obwohl nichts gespeichert wurde. Genau diesen Fehler verhindert die Zeile.

Das Honeypot-Feld haben wir beim Test leer gelassen, wie ein Mensch es tut. Ein ausgefülltes Honeypot-Feld nimmt Formgong zwar an, legt die Einsendung aber im Spam ab.

Ohne JavaScript geht es auch

Lassen Sie den <script>-Teil weg, sendet das Formular ganz normal, und Formgong zeigt danach eine eigene Danke-Seite auf Deutsch. Mit einem versteckten Feld _redirect leiten Sie stattdessen auf Ihre eigene Danke-Seite weiter. Diese Variante, ohne PHP und ohne eigenen Server, steht auf der Seite HTML-Kontaktformular ohne PHP.

Der Hinweis unter dem Button

Die Zeile unter dem Button informiert über den Zweck und verlinkt Ihre Datenschutzerklärung. Eine Einwilligungs-Checkbox braucht ein reines Kontaktformular in der Regel nicht. Einen Mustertext für diesen Hinweis und den passenden Abschnitt für die Datenschutzerklärung finden Sie im Ratgeber Datenschutzhinweis im Kontaktformular. Formgong speichert die Einsendungen in der EU (Cloudflare D1 mit EU-Jurisdiktion).

Andere Felder, fertige Vorlagen

Brauchen Sie mehr als Name, E-Mail und Nachricht, etwa ein Angebots- oder Bewerbungsformular? Die Formularvorlagen sind fertige Formulare für verschiedene Branchen und Zwecke. Der KI-Formulargenerator baut ein Formular aus einer Beschreibung in einem Satz. Beide senden an denselben Endpunkt wie der Code oben.

Alles in einem Konto. Feedback erwünscht

Mit einem Formgong-Konto bekommen Sie neben dem Kontaktformular, das an E-Mail und Telegram sendet, auch kostenlose Website-Vorlagen (auf Englisch), in denen das Formular schon angeschlossen ist, einen KI-Hilfe-Chat, der Fragen Ihrer Besucher aus Ihren eigenen Seiten beantwortet, und Kundenbewertungen zum Sammeln und Anzeigen. Anfragen landen in einem Posteingang. Jedes dieser Produkte hat einen kostenlosen Tarif.

Fehlt Ihnen auf dieser Seite etwas, oder ist etwas unklar? Schreiben Sie uns an support@formgong.com. Wir lesen jede Nachricht und verbessern die Seite danach.