HTML-Kontaktformular
Ein Kontaktformular in einfachem HTML. Der Browser sendet es. Kein Backend, kein Framework, keine Schrift.
Was Sie kopieren
Diese Vorlage ist ein Kontaktformular in einfachem HTML. Der Browser sendet es mit einem normalen POST. Es gibt keinen Aufruf von fetch, kein Framework und keinen Build-Schritt.
Fügen Sie das Markup in eine statische Seite, in ein Webflow-Embed oder an jede Stelle ein, die ein Formularelement annimmt. Die Seite braucht dafür keinen eigenen Server.
Das Formular fragt nach einem Namen, einer E-Mail-Adresse und einer Nachricht. Das Telefon ist optional. Diese Wörter sind zugleich die Namen der Felder.
Telegram setzt jeden Feldnamen fett über die Antwort. Kurze Namen wie name, email und message bleiben auf dem Telefon lesbar.
Hier wird keine Datei eingesammelt, keine Zahlung und keine Bewertung von Formgong. Es ist nur ein Weg, auf dem ein Besucher Sie erreichen kann.
So funktioniert das Absenden
Die Aktion des Formulars ist Ihr Formgong-Ursprung plus /submit, mit der Methode POST. Ein verstecktes Feld access_key benennt das Formular.
Der Schlüssel ist öffentlich und gehört auf die Seite. Er erlaubt einem Besucher, eine Einsendung zu schicken. Empfänger lassen sich damit nicht ändern, und ein Webhook lässt sich damit nicht einschalten.
Ein verstecktes Feld _lang trägt die Sprache der Seite, zum Beispiel en. Formgong nutzt es für die Danke-Seite und für den Fehlertext.
Die Nachricht des Besuchers wird damit nicht übersetzt. Schreiben Sie die sichtbaren Beschriftungen in der Sprache der Seite, und lassen Sie die Feldnamen auf Englisch.
Das Honeypot ist ein Eingabefeld mit dem Namen botcheck. Es liegt außerhalb des Bildschirms, mit tabindex -1 und ausgeschaltetem autocomplete. Menschen lassen es leer.
Eine Einsendung, in der botcheck ausgefüllt ist, wird als Spam gespeichert und nicht zugestellt. Der Besucher sieht trotzdem den normalen Erfolgsweg.
Turnstile ist optional. Im Snippet bleibt das Widget in einem Kommentar. Einen Site-Key enthält diese Vorlage nicht.
Wenn Sie Turnstile für das Formular einschalten, entfernen Sie die Kommentarzeichen und fügen Sie Ihren eigenen Site-Key ein. Bis dahin tun diese Zeilen nichts.
Ohne ein verstecktes _redirect zeigt Formgong die eigene Danke-Seite. Das zusätzliche Snippet setzt _redirect auf eine https-Adresse.
Ersetzen Sie https://example.com/thanks durch eine Seite, die Sie selbst kontrollieren. Ein relativer Pfad wird nicht angenommen.
Nachdem Sie es eingefügt haben
Legen Sie ein Formular im Dashboard an, oder nutzen Sie die Schaltfläche auf dieser Seite, und ersetzen Sie fk_your_access_key, falls Sie den Platzhalter kopiert haben.
Verbinden Sie Telegram in den Formulareinstellungen, wenn Sie die Nachricht auf dem Telefon sehen möchten. Im Free-Tarif ist die E-Mail eine tägliche Übersicht, und Telegram kommt sofort.
Senden Sie einen Test von der veröffentlichten Seite. Eine Datei, die als file:// geöffnet ist, ist kein zuverlässiger Test des laufenden Formulars.
Der Free-Tarif behält Einsendungen 30 Tage. Bezahlte Tarife können sie länger behalten. Formgong speichert sie in der EU.
Der Free-Tarif umfasst 300 Einsendungen im Monat. Spam zählt nicht zu dieser Zahl.
Wenn Sie ein Formular für eine Klinik, eine Bewerbung oder ein Angebot brauchen, nehmen Sie eine Branchenvorlage weiter unten auf dieser Website. Diese Seite ist nur das schlichte Layout für den Kontakt.
Fragen zum Dienst gehen an support@formgong.com. Formgong ist der Betreiber des Dienstes. Diese Vorlage nennt kein anderes Unternehmen als Betreiber.
Vorschau
Formularcode
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="de"> <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;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Lassen Sie dieses Feld leer <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <!-- Optional. Schalten Sie Turnstile für dieses Formular ein, entfernen Sie diese Kommentarzeichen und fügen Sie den Site-Key ein. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="de"></div> --> <button type="submit">Senden</button> </form>
Dasselbe Formular mit Weiterleitung zur Danke-Seite
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="de"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <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;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"> <label>Lassen Sie dieses Feld leer <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <!-- Optional. Schalten Sie Turnstile für dieses Formular ein, entfernen Sie diese Kommentarzeichen und fügen Sie den Site-Key ein. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="de"></div> --> <button type="submit">Senden</button> </form>
Fragen und Antworten
Braucht dieses Formular JavaScript?
Nein. Der Browser sendet das Formular von selbst. Die AJAX-Vorlage ist diejenige, die mit fetch auf der Seite bleibt.
Wohin gehen die Nachrichten?
In den Posteingang von Formgong, und an E-Mail sowie Telegram, sobald Sie beides verbinden. Schreiben Sie an support@formgong.com, wenn der Dienst selbst die Frage ist.
Kann ich weitere Felder hinzufügen?
Ja. Fügen Sie Eingabefelder mit kurzen Namen hinzu, zum Beispiel city. Telegram setzt diesen Namen über die Antwort. Benennen Sie access_key oder botcheck nicht um.
Sendet die Vorschau eine echte Nachricht?
Nein. Die Vorschau auf dieser Seite zeigt nur einen Hinweis. Es wird nichts gesendet, bis Sie das Snippet auf Ihrer eigenen Website mit einem echten Zugriffsschlüssel einsetzen.