Formularz kontaktowy HTML
Formularz kontaktowy w zwykłym HTML. Wysyła go przeglądarka. Bez backendu, frameworka i bez fontu.
Co kopiujesz
Ten szablon to formularz kontaktowy w zwykłym HTML. Przeglądarka wysyła go zwykłym żądaniem POST. Nie ma tu wywołania fetch, frameworka ani kroku budowania.
Wklej znaczniki na stronę statyczną, do osadzenia Webflow albo w każde miejsce, które przyjmuje element formularza. Twoja strona nie potrzebuje własnego serwera.
Formularz pyta o imię, adres e-mail i wiadomość. Telefon jest opcjonalny. Te słowa są jednocześnie nazwami pól, które trafiają w zgłoszeniu.
Telegram wypisuje nazwę każdego pola pogrubieniem nad odpowiedzią. Krótkie nazwy, takie jak name, email i message, da się przeczytać na telefonie.
Nic tutaj nie zbiera pliku, płatności ani oceny Formgong. To tylko sposób, w jaki odwiedzający może do ciebie dotrzeć.
Jak działa wysłanie
Akcja formularza to adres bazowy Formgong z dopisanym /submit, metoda POST. Ukryte pole access_key nazywa formularz, do którego ma trafić zgłoszenie.
Klucz jest publiczny i ma leżeć na stronie. Pozwala odwiedzającemu wysłać zgłoszenie. Nie zmienisz nim odbiorców i nie włączysz nim webhooka.
Ukryte pole _lang niesie język strony, na przykład en. Formgong bierze je do strony podziękowania i do tekstu błędu.
To pole nie tłumaczy wiadomości odwiedzającego. Widoczne etykiety pisz w języku strony, a nazwy pól zostaw po angielsku.
Honeypot to pole o nazwie botcheck. Stoi poza ekranem, z tabindex -1 i wyłączonym autocomplete. Ludzie zostawiają je puste.
Zgłoszenie, w którym wypełniono botcheck, jest zapisywane jako spam i nie jest dostarczane. Odwiedzający i tak widzi zwykłą ścieżkę sukcesu.
Turnstile jest opcjonalny. We fragmencie widżet zostaje wewnątrz komentarza. W tym szablonie nie ma klucza witryny.
Jeśli włączasz Turnstile dla formularza, usuń znaki komentarza i wklej własny klucz witryny. Do tego czasu te linie nic nie robią.
Bez ukrytego _redirect Formgong pokazuje własną stronę podziękowania. Dodatkowy fragment ustawia _redirect na adres https.
Zastąp https://example.com/thanks stroną, którą kontrolujesz. Ścieżka względna nie jest przyjmowana.
Po wklejeniu
Utwórz formularz w panelu albo użyj przycisku na tej stronie i zastąp fk_your_access_key, jeśli skopiujesz symbol zastępczy.
Podłącz Telegram w ustawieniach formularza, gdy chcesz wiadomość na telefonie. W darmowym planie e-mail przychodzi jako podsumowanie następnego ranka o 08:00, a Telegram od razu.
Wyślij test z opublikowanej strony. Plik otwarty jako file:// nie jest wiarygodnym testem żywego formularza.
Darmowy plan trzyma zgłoszenia przez 30 dni. Plany płatne mogą trzymać je dłużej. Formgong przechowuje je w UE.
Darmowy plan obejmuje 300 zgłoszeń miesięcznie. Spam nie wlicza się do tej liczby.
Jeśli potrzebujesz formularza dla przychodni, rekrutacji albo wyceny, weź szablon branżowy niżej na tej stronie. Ta strona to tylko prosty układ kontaktu.
Pytania o usługę wysyłaj na support@formgong.com. Operatorem usługi jest Formgong. Ten szablon nie nazywa innej firmy operatorem.
Podgląd
Kod formularza
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <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 przekierowaniem na podziękowanie
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="pl"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <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 ten formularz potrzebuje JavaScript?
Nie. Przeglądarka wysyła formularz sama. Szablon AJAX to ten, który zostaje na stronie dzięki fetch.
Dokąd idą wiadomości?
Do skrzynki Formgong oraz na e-mail i na Telegram, gdy je podłączysz. Napisz na support@formgong.com, jeśli pytanie dotyczy samej usługi.
Czy mogę dodać więcej pól?
Tak. Dodaj pola o krótkich nazwach, na przykład city. Telegram wypisze tę nazwę nad odpowiedzią. Nie zmieniaj nazw access_key ani botcheck.
Czy podgląd wysyła prawdziwą wiadomość?
Nie. Podgląd na tej stronie pokazuje tylko notatkę. Nic nie wychodzi, dopóki nie wstawisz fragmentu na własną stronę z prawdziwym kluczem dostępu.