Minimales Kontaktformular
Beschriftungen, drei Felder und ein Button. Kein Style-Block. Der Browser zeichnet die Felder. Der Versand ist derselbe wie bei den anderen Startern.
Was Sie kopieren
Diese Vorlage ist das Kontaktformular ohne Style-Block und ohne Utility-Klassen. Der Browser zeichnet die Steuerelemente mit seinem üblichen Aussehen.
Das ist nützlich, wenn Sie die Anfrage klar sehen möchten, oder wenn Ihr eigenes Stylesheet die Darstellung übernimmt.
Die Felder sind weiterhin Name, E-Mail, ein optionales Telefon und eine Nachricht. Die Schaltfläche sendet einen normalen POST.
Es gibt kein Framework, keine Schrift und kein Skript. Wenn Ihr globales CSS die Eingabefelder neu gestaltet, gilt dieses CSS. Diese Datei kämpft nicht dagegen an.
Die Vorschau auf dieser Seite lässt auch die Kartenstile der anderen Vorlagen weg, damit die Steuerelemente näher an einem ungestalteten Formular liegen.
Was trotzdem erforderlich ist
Auch ein schlichtes Formular braucht access_key, _lang und botcheck. Daran erkennt Formgong das Formular, die Sprache und das Honeypot.
Das Honeypot ist mit einem kurzen Style-Attribut an seinem Wrapper verborgen. Das ist der einzige Stil im Snippet. Ohne ihn könnten Menschen die Falle ausfüllen.
Turnstile steht in einem Kommentar. Das zusätzliche Snippet ist dasselbe Formular mit diesen Zeilen ohne Kommentarzeichen, und YOUR_TURNSTILE_SITE_KEY müssen Sie noch ersetzen.
Die Zeilen aus dem Kommentar zu nehmen erzeugt keinen Schlüssel. Legen Sie das Widget bei Cloudflare an, schalten Sie Turnstile am Formular ein und fügen Sie danach den Site-Key ein.
Ein Skript in einem Kommentar läuft nicht. Lassen Sie den Kommentar stehen, bis Sie das Widget wirklich einsetzen möchten.
Dieselbe Zustellung wie bei den gestalteten Vorlagen
Telegram setzt die Feldnamen fett. Halten Sie sie kurz. Übersetzen Sie nur den Text, den der Besucher liest.
Ohne _redirect zeigt Formgong die eigene Danke-Seite. Fügen Sie _redirect nur als absolute https-Adresse hinzu, die Ihnen gehört.
Der Free-Tarif umfasst 300 Einsendungen im Monat, 30 Tage Aufbewahrung, sofortiges Telegram und eine tägliche E-Mail-Übersicht.
Die Daten werden in der EU gespeichert. Formgong betreibt den Dienst. Die Adresse für den Support ist support@formgong.com.
Wenn das schlichte Formular funktioniert, können Sie es in Ihr eigenes Layout setzen. Sie müssen nicht mit einer gestalteten Vorlage beginnen.
Vorschau
Formularcode
<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"> <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 einkommentiertem Turnstile
<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"> <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
Warum hat das Honeypot trotzdem einen Stil?
Damit die Falle außerhalb des Bildschirms bleibt. Alles andere ist absichtlich ohne Gestaltung. Wenn Sie diese eine Regel entfernen, wird die Falle sichtbar.
Bricht das CSS meiner Website den POST?
CSS ändert den POST nicht. Ein Stil kann die Schaltfläche zum Absenden verbergen, entscheidend sind aber die Feldnamen und die Aktions-URL.
Ist es aus einem bestimmten Grund kleiner?
Ja. Es ist dieselbe Anfrage mit weniger Gestaltung, damit Sie es auf eine Seite setzen können, die bereits ein Design hat.
Brauche ich das Feld für das Telefon?
Nein. Entfernen Sie diese Beschriftung, wenn Sie keine Telefonnummer möchten. Lassen Sie email stehen, wenn Sie im Posteingang eine Adresse für die Antwort haben möchten.