Formgong

Formularz kontaktowy Tailwind

Tylko klasy użytkowe. Tailwind musi już być na stronie. Ten snippet nie dodaje skryptu CDN ani fontu.

Zaloguj się, aby użyć szablonu

Co kopiujesz

Ten szablon to formularz kontaktowy oznaczony klasami użytkowymi Tailwind. To nadal zwykły POST do Formgong.

Fragment nie ładuje Tailwinda. Nie dodaje skryptu z CDN i nie ładuje fontu.

Twoja strona albo twój build musi już zawierać Tailwind. Jeśli klas brakuje, formularz i tak się wyśle, ale będzie wyglądał bez stylów.

Podgląd na tej stronie jest narysowany CSS-em Formgong, żeby było widać pola. To nie jest wyrenderowany Tailwind.

Widoczne etykiety idą za językiem strony. Nazwy pól zostają name, email, phone i message, żeby Telegram mógł je wypisać.

Klasy i ciemny dodatek

Pola mają obramowanie, odstęp i niewielki promień. Przycisk ma ciemne tło i jasny tekst. Nie ma osobnej rodziny fontów.

Nie dodawaj klasy, która wskazuje pobrany font. Font strony, którego już używasz, wystarczy.

Dodatkowy fragment dodaje klasy dark: dla tekstu, obramowań i teł. Nic nie robią, dopóki twój build Tailwinda nie ma trybu ciemnego.

Tryb ciemny Tailwinda może iść za systemem albo za klasą na elemencie html. Ten szablon tego nie konfiguruje. Tylko dodaje klasy.

Jeśli nie używasz trybu ciemnego, skopiuj pierwszy fragment i pomiń dodatkowy.

Honeypot zostaje wizualnie ukryty krótkim atrybutem stylu, a nie klasą Tailwind, więc jest ukryty nawet wtedy, gdy Tailwinda brakuje.

To samo wysłanie co w HTML

Akcja, metoda, access_key, _lang i botcheck zgadzają się ze zwykłym szablonem HTML. Tailwind nie zmienia żądania.

Turnstile zostaje w komentarzu, dopóki go nie włączysz i nie wkleisz klucza witryny. Symbol zastępczy YOUR_TURNSTILE_SITE_KEY nie jest prawdziwym kluczem.

W darmowym planie Telegram przychodzi od razu, a e-mail jest dziennym przeglądem. Zgłoszenia zostają przez 30 dni. Miesięczny limit to 300.

Zastąp fk_your_access_key kluczem z panelu albo użyj przycisku na tej stronie po zalogowaniu.

Operatorem jest Formgong. Pytania o produkt wysyłaj na support@formgong.com.

Podgląd

Kod formularza

HTML
<!-- Ten markup zakłada, że Tailwind jest już na stronie. Nie ładuje Tailwinda, CDN ani fontu. -->
<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="pl">
  <label class="grid gap-1 text-sm"><span class="font-medium">Imię</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">Wiadomość</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>Pozostaw to pole puste <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcjonalnie. Włącz Turnstile dla tego formularza, usuń te znaczniki komentarza i wklej klucz witryny.
<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="pl"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">Wyślij</button>
</form>
Te same pola z klasami Tailwind dark:
Te same pola z klasami Tailwind dark:
<!-- Ten markup zakłada, że Tailwind jest już na stronie. Nie ładuje Tailwinda, CDN ani fontu. -->
<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="pl">
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Imię</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">Wiadomość</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>Pozostaw to pole puste <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
Opcjonalnie. Włącz Turnstile dla tego formularza, usuń te znaczniki komentarza i wklej klucz witryny.
<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="pl"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">Wyślij</button>
</form>

Pytania i odpowiedzi

Czy to zadziała w Lovable albo Bolt?

Często tak, bo te narzędzia już używają Tailwinda. Szablon dla kreatora na tym hubie to prompt, który mówi te same zasady słowami.

Czy mogę załadować Tailwind z CDN w tym fragmencie?

Ten szablon tak nie robi. Skrypt z CDN to zależność od strony trzeciej i jest zbędny, gdy aplikacja już buduje Tailwind.

Dlaczego podgląd nie używa moich kolorów?

Podgląd nie widzi twojego buildu Tailwinda. Wklej kod na stronę, na której Tailwind jest, a klasy użytkowe zadziałają tam.

Czy klasy dark: wymuszają ciemną stronę?

Nie. Działają tylko wtedy, gdy tryb ciemny Tailwinda jest włączony. Osobny ciemny szablon to zwykły CSS dla stron bez Tailwinda.