HTML-Kontaktformular ohne PHP: fertiger Code mit E-Mail-Versand

Code für das HTML-Kontaktformular

1. Legen Sie ein kostenloses Formgong-Konto an und kopieren Sie den Zugriffsschlüssel des Formulars.
2. Fügen Sie den Code dort ein, wo das Formular erscheinen soll, und ersetzen Sie fk_your_access_key durch Ihren Schlüssel.
3. Veröffentlichen Sie die Seite und senden Sie eine Testanfrage. Die Nachricht geht an die E-Mail-Adresse Ihres Kontos.

<style>
  .fg-form label { display: block; margin: 0 0 12px; }
  .fg-form input:not([type="checkbox"]), .fg-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px; font: inherit; }
  .fg-form textarea { min-height: 120px; }
  .fg-form small { display: block; margin-top: 10px; opacity: .75; }
</style>
<form class="fg-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="de">
  <input type="hidden" name="_subject" value="Neue Nachricht über die Website">
  <!-- Optional: eigene Danke-Seite -->
  <!-- <input type="hidden" name="_redirect" value="https://ihre-website.de/danke"> -->
  <label>Name <input type="text" name="name" autocomplete="name" required></label>
  <label>E-Mail <input type="email" name="email" autocomplete="email" required></label>
  <label>Telefon <input type="tel" name="phone" autocomplete="tel"></label>
  <label>Nachricht <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden">
    <label>Lassen Sie dieses Feld leer<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
  </div>
  <button type="submit">Senden</button>
  <small>Mit dem Absenden übermitteln Sie uns Ihre Angaben, damit wir antworten können. Details: <a href="/datenschutz">Datenschutzerklärung</a>.</small>
</form>

Das Telefonfeld ist optional. Entfernen Sie es oder ergänzen Sie eigene Felder: Jedes Feld mit einem name-Attribut erscheint in der E-Mail.

So funktioniert es ohne PHP

Das Attribut action sendet die Daten per POST an Formgong. Versteckte Felder steuern die Verarbeitung:

• access_key bestimmt Ihr Formular und die Adresse, an die die E-Mail geht;
• _lang legt die Sprache der Danke-Seite und der automatischen Antwort fest;
• _subject legt den Betreff der E-Mail fest;
• _redirect (optional) leitet auf Ihre eigene Danke-Seite weiter. Ohne dieses Feld sehen Besucher die Danke-Seite von Formgong.

Ein PHP-Formular mit mail() braucht Hosting mit PHP und eine korrekt eingerichtete Mail-Konfiguration, und solche E-Mails landen oft im Spam. Das entfällt hier: Der Code funktioniert auch auf statischem Hosting, in Website-Baukästen und in CMS.

Spamschutz ohne Captcha-Rätsel

• Der Honeypot (botcheck) ist immer aktiv, auch im kostenlosen Tarif. Bot-Einsendungen landen in einem eigenen Tab und zählen nicht zum Kontingent.
• Bei viel Spam schalten Sie Cloudflare Turnstile ein. Turnstile prüft meist unsichtbar, ohne Bilderrätsel, und ist im Free-Tarif enthalten.
• In Pro und Business können Sie das Formular auf Ihre eigenen Domains beschränken.

Formular und DSGVO

Der Code enthält einen kurzen Hinweis mit Link zur Datenschutzerklärung. Einsendungen werden in der EU gespeichert (Cloudflare D1 mit EU-Jurisdiktion), die IP-Adresse nur als Hash. Sie bleiben Verantwortlicher, Formgong ist Auftragsverarbeiter; eine AVV-Vorlage steht bereit. Formgong unterstützt Sie dabei, die DSGVO-Pflichten als Verantwortlicher bleiben aber bei Ihnen.

Muster für den Datenschutzhinweis und die Regeln zur Einwilligungs-Checkbox finden Sie im Ratgeber Kontaktformular und DSGVO.

Wo Sie das Formular einfügen

• normale HTML-Seite oder statisches Hosting: Code in eine Datei einfügen, z. B. kontakt.html (Anleitung für HTML);
• WordPress: Block „Individuelles HTML“ (Anleitung für WordPress);
• andere Baukästen und CMS: jedes Element, in das Sie eigenen HTML-Code einfügen können.

Extra: Anfragen in Telegram

Im Formgong-Dashboard können Sie zusätzlich Telegram verbinden: Anfragen kommen dann gleichzeitig per E-Mail und in einen privaten oder Gruppenchat. Eine Chat-ID müssen Sie nicht heraussuchen, und mit Buttons unter der Nachricht markieren Sie Spam oder ändern den Status. Alle Einsendungen finden Sie außerdem im Posteingang des Dashboards, mit CSV-Export.