Koyu tema iletişim formu
Sayfadaki bir stil bloğuyla koyu renklerde çizilmiş iletişim formu. Sistem yazı tipini kullanır. Yazı tipi dosyası yüklemez.
Kopyaladığınız şey
Bu başlangıç şablonu, renkleri sayfadaki bir stil bloğunda yazılmış koyu bir iletişim formudur. Koyu görünüm, snippet'in kendi stil bloğundadır.
Yazı tipi yığını system-ui ve Segoe UI'dir. Snippet bir yazı tipi dosyası yüklemez ve bir yazı tipi sunucusuna çağrı yapmaz.
Renkler formun kendisinde durur: koyu bir zemin, açık metin ve açık bir düğme. Bu renkler Formgong CSS'ine bağlı değildir.
Bu sitedeki önizleme aynı düşünceyi, sitenin kendi stil dosyasıyla kullanır, böylece kopyalamadan önce kontrastı görebilirsiniz.
Gönderim normal bir HTML POST'udur. Koyu renkler access_key, _lang ya da botcheck değerini değiştirmez.
Her zaman koyu ya da sistemi izleyen
İlk snippet her zaman koyudur. Onu zaten koyu olan bir sayfada kullanın ya da formun açık bir sayfada koyu kalmasını istediğinizde kullanın. Sistem ayarı bu ilk parçada rengi değiştirmez.
Ek snippet varsayılan olarak açıktır ve prefers-color-scheme: dark içinde aynı koyu renklere geçer.
Bu ortam sorgusu ziyaretçinin sistem ayarını izler. Snippet bir geçiş düğmesi eklemez, çünkü bir geçiş için betik ve saklanmış bir seçim gerekir.
Elle bir anahtar istiyorsanız onu sitenizin mevcut tema denetiminde tutun. Yalnızca bu form için ikinci, çelişen bir renk şeması eklemeyin.
Girdiler yazı tipini devralır. Bir @import yoktur ve başka bir alan adındaki stil dosyasına bağlantı yoktur.
Teslim ve sınırlar
Etiketler çevrilebilir. Alan adları Telegram kısa kalsın diye name, email, phone ve message olarak kalır.
Honeypot küçük bir stil kullanır, böylece hem açık hem koyu şemada ekran dışında kalır.
Turnstile isteğe bağlıdır ve yorum satırındadır. Site anahtarınızı ancak formda Turnstile'ı açtıktan sonra yapıştırın.
Ücretsiz plan ayda 300 başvuruya izin verir, onları AB'de 30 gün saklar, Telegram'ı hemen gönderir ve e-postayı günlük bir özet olarak gönderir.
İşleten Formgong'dur. Destek adresi support@formgong.com adresidir.
Önizleme
Form kodu
<style>
.fg-dark {
font-family: system-ui, "Segoe UI", sans-serif;
color: #e8eaef;
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px;
display: grid;
gap: 12px;
max-width: 32rem;
}
.fg-dark label { display: grid; gap: 4px; }
.fg-dark input, .fg-dark textarea {
font: inherit;
color: inherit;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 8px 10px;
}
.fg-dark button {
font: inherit;
background: #e8eaef;
color: #161b22;
border: 0;
border-radius: 8px;
padding: 8px 14px;
}
</style>
<form class="fg-dark" action="https://formgong.com/submit" method="POST">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="tr">
<label>Ad <input type="text" name="name" autocomplete="name" required></label>
<label>E-posta <input type="email" name="email" autocomplete="email" required></label>
<label>Telefon <input type="tel" name="phone" autocomplete="tel"></label>
<label>Mesaj <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>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 type="submit">Gönder</button>
</form>Varsayılan açık, sistem koyuysa koyu
<style>
.fg-auto { font-family: system-ui, "Segoe UI", sans-serif; display: grid; gap: 12px; max-width: 32rem; }
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea, .fg-auto button { font: inherit; }
@media (prefers-color-scheme: dark) {
.fg-auto {
font-family: system-ui, "Segoe UI", sans-serif;
color: #e8eaef;
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px;
display: grid;
gap: 12px;
max-width: 32rem;
}
.fg-auto label { display: grid; gap: 4px; }
.fg-auto input, .fg-auto textarea {
font: inherit;
color: inherit;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 8px 10px;
}
.fg-auto button {
font: inherit;
background: #e8eaef;
color: #161b22;
border: 0;
border-radius: 8px;
padding: 8px 14px;
}
}
</style>
<form class="fg-auto" action="https://formgong.com/submit" method="POST">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="tr">
<label>Ad <input type="text" name="name" autocomplete="name" required></label>
<label>E-posta <input type="email" name="email" autocomplete="email" required></label>
<label>Telefon <input type="tel" name="phone" autocomplete="tel"></label>
<label>Mesaj <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>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 type="submit">Gönder</button>
</form>Sorular ve yanıtlar
Bu, sitemin koyu temasıyla çatışır mı?
Form kendi zeminini boyar. Koyu bir sayfada bu genellikle uygundur. Temanız girdileri zaten stilliyorsa yapıştırdıktan sonra kontrastı kontrol edin.
Düğmede marka rengimi kullanabilir miyim?
Evet. Stil bloğunda düğmenin zeminini değiştirin. Üçüncü taraftan bir marka yazı tipine uymak için bir yazı tipi içe aktarması eklemeyin.
Sistem snippet'i önce açık, sonra koyu yanıp söner mi?
Açık başlar, sonra tarayıcı ortam sorgusunu uygular. Koyu renkleri yeğleyen kişiler koyu kuralları ikinci bir istek olmadan görmelidir.
Honeypot koyu modda görünür mü?
Görünmemelidir. Tek piksellik bir kutuyla ekran dışına konmuştur. Formu yeniden stillerseniz bu kuralı koruyun.