Tailwind iletişim formu

Yalnızca yardımcı sınıflar. Sayfada Tailwind zaten olmalıdır. Bu snippet CDN betiği veya yazı tipi eklemez.

Kopyaladığınız şey

Bu başlangıç şablonu, Tailwind yardımcı sınıflarıyla işaretlenmiş iletişim formudur. Yine de Formgong'a giden normal bir POST'tur.

Snippet Tailwind yüklemez. Bir CDN betiği eklemez ve bir yazı tipi de yüklemez.

Sayfanızda ya da derlemenizde Tailwind zaten bulunmalıdır. Sınıflar yoksa form yine gönderilir, fakat stillenmemiş görünür. Eksik sınıflar POST'u durdurmaz.

Bu sayfadaki önizleme, alanları görebilmeniz için Formgong CSS'i ile çizilir. Bu bir Tailwind çıktısı değildir.

Görünen etiketler sayfanın dilini izler. Alan adları Telegram için name, email, phone ve message olarak kalır.

Sınıflar ve koyu renk eki

Girdilerde kenarlık, iç boşluk ve küçük bir yarıçap vardır. Düğmede koyu bir zemin ve açık bir metin vardır. Özel bir yazı tipi ailesi yoktur.

İndirilmiş bir yazı tipine işaret eden bir sınıf eklemeyin. Sitenizde zaten kullandığınız yazı tipi yeterlidir.

Ek snippet metin, kenarlık ve zemin için dark: sınıfları ekler. Tailwind derlemenizde koyu mod yoksa bu sınıflar bir şey yapmaz.

Tailwind koyu modu sistemi izleyebilir ya da html öğesindeki bir sınıfı izleyebilir. Bu şablon o ayarı yapılandırmaz. Yalnızca sınıfları ekler.

Koyu mod kullanmıyorsanız ilk snippet'i kopyalayın ve ek olanı yok sayın.

Honeypot, bir Tailwind sınıfıyla değil, küçük bir stil özniteliğiyle görsel olarak gizli kalır. Tailwind olmasa da gizli kalır.

HTML başlangıç şablonuyla aynı gönderim

Action, yöntem, access_key, _lang ve botcheck düz HTML başlangıç şablonuyla aynıdır. Tailwind isteği değiştirmez.

Turnstile, siz açıp bir site anahtarı yapıştırana kadar yorumun içinde kalır. YOUR_TURNSTILE_SITE_KEY yer tutucusu gerçek bir anahtar değildir.

Ücretsiz planda Telegram hemen gelir ve e-posta günlük bir özettir. Başvurular 30 gün saklanır. Aylık kota 300 başvurudur.

fk_your_access_key değerini paneldeki anahtarla değiştirin ya da oturumunuz açıkken bu sayfadaki düğmeyi kullanın.

İşleten Formgong'dur. Ürün soruları support@formgong.com adresine gider.

Önizleme

Form kodu

HTML

<!-- Bu işaretleme sayfada Tailwind olduğunu varsayar. Tailwind, CDN veya yazı tipi yüklemez. -->
<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="tr">
  <label class="grid gap-1 text-sm"><span class="font-medium">Ad</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-posta</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">Mesaj</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>Bu alanı boş bırakın <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
İsteğe bağlı. Bu form için Turnstile açın, sonra bu yorum işaretlerini kaldırın ve site anahtarınızı yapıştırın.
<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="tr"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white" type="submit">Gönder</button>
</form>

Tailwind dark: sınıflarıyla aynı alanlar

Tailwind dark: sınıflarıyla aynı alanlar

<!-- Bu işaretleme sayfada Tailwind olduğunu varsayar. Tailwind, CDN veya yazı tipi yüklemez. -->
<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="tr">
  <label class="grid gap-1 text-sm dark:text-neutral-100"><span class="font-medium">Ad</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-posta</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">Mesaj</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>Bu alanı boş bırakın <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
İsteğe bağlı. Bu form için Turnstile açın, sonra bu yorum işaretlerini kaldırın ve site anahtarınızı yapıştırın.
<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="tr"></div>
-->
  <button class="rounded-md bg-neutral-900 px-4 py-2 text-white dark:bg-neutral-100 dark:text-neutral-900" type="submit">Gönder</button>
</form>

Sorular ve yanıtlar

Bu Lovable ya da Bolt içinde çalışır mı?

Çoğu zaman evet, çünkü bu araçlar zaten Tailwind kullanır. Bu merkezdeki yapay zekâ oluşturucu başlangıç şablonu, aynı kuralları sözcüklerle söyleyen bir prompt'tur.

Bu snippet'te Tailwind'i bir CDN'den yükleyebilir miyim?

Bu şablon bunu yapmaz. Bir CDN betiği üçüncü taraf bir bağımlılıktır ve uygulamanız Tailwind'i zaten derliyorsa gereksizdir.

Önizleme neden benim renklerimi kullanmıyor?

Önizleme sizin Tailwind derlemenizi göremez. Kodu Tailwind bulunan bir sayfaya kopyalayın; yardımcı sınıflar orada uygulanır.

dark: sınıfları sayfayı koyu olmaya zorlar mı?

Hayır. Yalnızca sizin Tailwind koyu modunuz etkinken uygulanırlar. Ayrı koyu mod başlangıç şablonu, Tailwind olmayan sayfalar için düz CSS'tir.