Formgong

Minimalny formularz kontaktu

Etykiety, trzy pola i przycisk. Bez bloku stylów. Kontrolki rysuje przeglądarka. Wysyłka jest taka sama jak w innych szablonach startowych.

Zaloguj się, aby użyć szablonu

Co kopiujesz

Ten szablon to formularz kontaktowy bez bloku stylów i bez klas użytkowych. Przeglądarka rysuje kontrolki swoim domyślnym wyglądem.

Przydaje się, gdy chcesz wyraźnie widzieć żądanie albo gdy malować będzie twój własny arkusz stylów.

Pola są nadal te same: imię, e-mail, opcjonalny telefon i wiadomość. Przycisk wysyła zwykły POST.

Nie ma frameworka, fontu ani skryptu. Jeśli twój ogólny CSS przestylizuje pola, ten CSS się zastosuje. Ten plik z nim nie walczy.

Podgląd na tej stronie też pomija style kart używane przez inne szablony, więc kontrolki są bliższe formularzowi bez stylów.

Co i tak jest potrzebne

Nawet goły formularz potrzebuje access_key, _lang i botcheck. Dzięki nim Formgong rozpoznaje formularz, język i honeypot.

Honeypot jest ukryty krótkim atrybutem stylu na jego opakowaniu. To jedyny styl we fragmencie. Bez niego ludzie mogą wypełnić pułapkę.

Turnstile stoi w komentarzu. Dodatkowy fragment to ten sam formularz z odkomentowanymi liniami, w których YOUR_TURNSTILE_SITE_KEY nadal trzeba zastąpić.

Odkomentowanie linii nie tworzy klucza. Utwórz widżet w Cloudflare, włącz Turnstile na formularzu, a potem wklej klucz witryny.

Zakomentowany skrypt się nie wykonuje. Zostaw komentarz, dopóki widżet naprawdę nie jest potrzebny.

To samo dostarczenie co w ostylowanych

Telegram wypisuje nazwy pól pogrubieniem. Zostaw je krótkie. Tłumacz tylko tekst, który czyta odwiedzający.

Bez _redirect Formgong pokazuje swoją stronę podziękowania. Dodawaj _redirect tylko jako bezwzględny adres https, który należy do ciebie.

Darmowy plan obejmuje 300 zgłoszeń miesięcznie, 30 dni przechowywania, Telegram od razu i dzienny przegląd e-mail.

Dane są przechowywane w UE. Usługę prowadzi Formgong. Adres wsparcia to support@formgong.com.

Gdy goły formularz działa, możesz owinąć go we własny układ. Nie musisz zaczynać od ostylowanego szablonu.

Podgląd

Kod formularza

HTML
<form 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>
Ten sam formularz z odkomentowanym Turnstile
Ten sam formularz z odkomentowanym Turnstile
<form 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

Dlaczego na honeypot nadal jest styl?

Żeby pułapka została poza ekranem. Cała reszta jest celowo bez stylów. Usunięcie tej jednej reguły czyni pułapkę widoczną.

Czy CSS mojej strony zepsuje POST?

CSS nie zmienia POST. Styl może schować przycisk wysłania, ale liczą się nazwy pól i adres akcji.

Dlaczego jest mniejszy?

Tak. To jest to samo żądanie, tylko z mniejszą ilością stylów, więc możesz wstawić je na stronę, która już ma projekt.

Czy pole telefonu jest potrzebne?

Nie. Usuń tę etykietę, jeśli nie chcesz numeru. Zostaw email, jeśli w skrzynce potrzebujesz adresu do odpowiedzi.