Tailwind-Kontaktformular
Nur Utility-Klassen. Tailwind muss auf der Seite schon vorhanden sein. Dieses Snippet fügt kein CDN-Skript und keine Schrift hinzu.
Was Sie kopieren
Diese Vorlage ist das Kontaktformular, ausgezeichnet mit den Utility-Klassen von Tailwind. Es bleibt ein normaler POST an Formgong.
Das Snippet lädt Tailwind nicht. Es fügt kein Skript von einem CDN hinzu, und es lädt keine Schrift.
Ihre Seite oder Ihr Build muss Tailwind bereits enthalten. Fehlen die Klassen, wird das Formular trotzdem gesendet, es sieht dann aber ungestaltet aus.
Die Vorschau auf dieser Seite ist mit dem CSS von Formgong gezeichnet, damit Sie die Felder sehen können. Es ist keine Darstellung durch Tailwind.
Die sichtbaren Beschriftungen folgen der Sprache der Seite. Die Feldnamen bleiben name, email, phone und message für Telegram.
Klassen und das dunkle Zusatzsnippet
Die Eingabefelder nutzen einen Rahmen, Innenabstand und einen kleinen Radius. Die Schaltfläche nutzt einen dunklen Hintergrund und hellen Text. Eine eigene Schriftfamilie gibt es nicht.
Fügen Sie keine Klasse hinzu, die auf eine heruntergeladene Schrift zeigt. Die Schrift der Website, die Sie bereits verwenden, genügt.
Das zusätzliche Snippet fügt Klassen dark: für Text, Rahmen und Hintergründe hinzu. Sie tun nichts, bis Ihr Tailwind-Build einen dunklen Modus besitzt.
Der dunkle Modus von Tailwind kann der Systemeinstellung folgen oder einer Klasse am Element html. Diese Vorlage richtet das nicht ein. Sie fügt nur die Klassen hinzu.
Wenn Sie den dunklen Modus nicht nutzen, kopieren Sie das erste Snippet und lassen Sie das zusätzliche Snippet weg.
Das Honeypot bleibt mit einem kleinen Style-Attribut visuell verborgen, nicht mit einer Klasse von Tailwind, damit es auch dann verborgen bleibt, wenn Tailwind fehlt.
Dasselbe Absenden wie bei der HTML-Vorlage
Aktion, Methode, access_key, _lang und botcheck entsprechen der einfachen HTML-Vorlage. Tailwind ändert die Anfrage nicht.
Turnstile bleibt in einem Kommentar, bis Sie es einschalten und einen Site-Key einfügen. Der Platzhalter YOUR_TURNSTILE_SITE_KEY ist kein echter Schlüssel.
Im Free-Tarif kommt Telegram sofort an, und die E-Mail ist eine tägliche Übersicht. Einsendungen bleiben 30 Tage gespeichert. Das monatliche Kontingent beträgt 300.
Ersetzen Sie fk_your_access_key durch den Schlüssel aus dem Dashboard, oder nutzen Sie die Schaltfläche auf dieser Seite, während Sie angemeldet sind.
Formgong ist der Betreiber. Fragen zum Produkt gehen an support@formgong.com.
Vorschau
Formularcode
<!-- Dieses Markup setzt voraus, dass Tailwind schon auf der Seite ist. Es lädt weder Tailwind noch ein CDN noch eine Schrift. --> <form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="de"> <label class="grid gap-1 text-sm"><span class="font-medium">Name</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="text" name="name" autocomplete="name" required></label> <label class="grid gap-1 text-sm"><span class="font-medium">E-Mail</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="email" name="email" autocomplete="email" required></label> <label class="grid gap-1 text-sm"><span class="font-medium">Telefon</span><input class="w-full rounded-md border border-neutral-300 px-3 py-2" type="tel" name="phone" autocomplete="tel"></label> <label class="grid gap-1 text-sm"><span class="font-medium">Nachricht</span><textarea class="w-full rounded-md border border-neutral-300 px-3 py-2" 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 class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">Senden</button> </form>
Dieselben Felder mit Tailwind-Klassen dark:
<!-- Dieses Markup setzt voraus, dass Tailwind schon auf der Seite ist. Es lädt weder Tailwind noch ein CDN noch eine Schrift. --> <form action="https://formgong.com/submit" method="POST" class="relative mx-auto grid max-w-lg gap-4 dark:text-neutral-100"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="de"> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Name</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="text" name="name" autocomplete="name" required></label> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">E-Mail</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="email" name="email" autocomplete="email" required></label> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Telefon</span><input class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" type="tel" name="phone" autocomplete="tel"></label> <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Nachricht</span><textarea class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-100" 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 class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">Senden</button> </form>
Fragen und Antworten
Funktioniert das in Lovable oder Bolt?
Oft ja, weil diese Werkzeuge Tailwind bereits verwenden. Die Vorlage für den KI-Builder auf diesem Hub ist ein Prompt, der dieselben Regeln in Worten nennt.
Kann ich Tailwind in diesem Snippet von einem CDN laden?
Diese Vorlage tut das nicht. Ein CDN-Skript ist eine Abhängigkeit von einem Drittanbieter, und es ist unnötig, wenn Ihre Anwendung Tailwind bereits selbst baut.
Warum verwendet die Vorschau nicht meine Farben?
Die Vorschau kann Ihren Tailwind-Build nicht sehen. Kopieren Sie den Code in eine Seite, die Tailwind enthält, dort gelten die Utility-Klassen.
Erzwingen Klassen mit dark: eine dunkle Seite?
Nein. Sie gelten nur, wenn der dunkle Modus von Tailwind bei Ihnen aktiv ist. Die eigene Vorlage für den dunklen Modus ist einfaches CSS für Seiten ohne Tailwind.