Ciemny formularz kontaktowy
Formularz kontaktowy w ciemnych kolorach, ze stylami na stronie. Używa fontu systemowego i nie ładuje pliku fontu.
Co kopiujesz
Ten szablon to formularz kontaktowy z ciemną paletą kolorów zapisaną w bloku stylów na stronie.
Stos fontów to system-ui i Segoe UI. Fragment nie ładuje pliku fontu i nie odwołuje się do hosta fontów.
Kolory są ustawione na samym formularzu: ciemne tło, jasny tekst i jasny przycisk. Nie zależą od CSS Formgong.
Podgląd na tej stronie używa tego samego pomysłu, ze stylami strony, więc kontrast widać, zanim skopiujesz kod.
Wysłanie to zwykły HTML POST. Ciemne kolory nie zmieniają access_key, _lang ani botcheck.
Zawsze ciemny albo za systemem
Pierwszy fragment jest ciemny cały czas. Weź go na stronę, która już jest ciemna, albo gdy formularz ma zostać ciemny na jasnej stronie.
Dodatkowy fragment jest domyślnie jasny i przełącza się na te same ciemne kolory wewnątrz prefers-color-scheme: dark.
To zapytanie o media idzie za ustawieniem systemu odwiedzającego. Fragment nie dodaje przycisku przełącznika, bo przełącznik potrzebuje skryptu i zapisanego wyboru.
Jeśli chcesz ręczny przełącznik, zostaw go w już istniejącym sterowaniu motywem strony. Nie dodawaj drugiego, sprzecznego schematu tylko dla tego formularza.
Pola dziedziczą font. Nie ma @import i nie ma linku do arkusza stylów na innej domenie.
Dostarczenie i limity
Etykiety możesz przetłumaczyć. Nazwy pól zostają name, email, phone i message, żeby Telegram został krótki.
Honeypot jest schowany krótkim stylem, więc zostaje poza ekranem i na jasnym, i na ciemnym schemacie.
Turnstile jest opcjonalny i zakomentowany. Wklej klucz witryny dopiero po włączeniu Turnstile na formularzu.
Darmowy plan pozwala na 300 zgłoszeń miesięcznie, trzyma je 30 dni w UE, wysyła Telegram od razu, a e-mail jako dzienny przegląd.
Operatorem jest Formgong. Adres wsparcia to support@formgong.com.
Podgląd
Kod formularza
<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="pl">
<label>Imię <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>Wiadomość <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>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 type="submit">Wyślij</button>
</form>Jasny domyślnie, ciemny gdy taki jest system
<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="pl">
<label>Imię <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>Wiadomość <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>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 type="submit">Wyślij</button>
</form>Pytania i odpowiedzi
Czy to zderzy się z ciemnym motywem mojej strony?
Formularz sam ustawia własne tło. Na ciemnej stronie to zwykle jest w porządku. Jeśli twój motyw już stylizuje pola, po wklejeniu sprawdź kontrast.
Czy mogę dać kolor marki na przycisk?
Tak. Zmień tło przycisku w bloku stylów. Nie dodawaj importu fontu, żeby powtórzyć krój marki od strony trzeciej.
Czy fragment systemowy mignie jasnym, a potem ciemnym?
Zaczyna od jasnego wyglądu, a potem przeglądarka stosuje zapytanie o media. Osoby, które wolą ciemne kolory, powinny zobaczyć ciemne reguły bez drugiego żądania.
Czy honeypot widać w trybie ciemnym?
Nie powinien być widoczny. Jest odsunięty poza ekran i ma rozmiar jednego piksela. Jeśli przestylizujesz formularz, zostaw tę regułę.