Formularz HTML na statycznej stronie, bez własnego serwera

Bez własnego backendu, ale z miejscem odbioru

Statyczny hosting może wyświetlić formularz, lecz sam HTML nie zapisze wiadomości i nie wyśle emaila. Te zadania przejmuje Formgong. To praktyczne rozwiązanie dla portfolio lub strony usługowej z polami tekstowymi.

Jeśli masz już serwer obsługujący konta i dane aplikacji, możesz wykorzystać go również do formularza. Poniższy wariant jest dla osób, które takiego serwera nie chcą utrzymywać.

Przygotowanie przed wklejeniem kodu

Utwórz formularz w Formgong, potwierdź email i pobierz klucz z sekcji podłączenia strony. Zastąp nim przykładowy fk_your_access_key. Klucz jest publiczny i może pozostać w HTML.

Niezweryfikowana poczta może wstrzymać powiadomienia. Najpierw zakończ potwierdzenie, dopiero potem oceniaj dostawę.

Kod do sekcji kontaktowej

Wklej przykład do strony i dodaj własne klasy CSS. Podpisy pól możesz zmieniać; nazwy przesyłanych danych pozostaw zgodne z przykładem. Wariant obejmuje pola tekstowe, nie przesyłanie plików.

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

Trzy atrybuty, od których zależy wysyłka

action wskazuje odbiorcę, method="POST" sposób wysłania, a name nazwę każdej wartości. Sam id pola nie wystarczy. Dodatkowy telefon może mieć name="phone".

botcheck jest pułapką dla botów. Nie pokazuj go użytkownikowi i nie oznaczaj jako wymagane. Wypełnione pole może spowodować zapis jako spam bez powiadomień.

Co użytkownik zobaczy po wysłaniu

Bez własnego przekierowania pojawi się strona wyniku Formgong. W ustawieniach możesz wskazać pełny adres HTTPS strony podziękowania na swoim serwisie. Ukryte _redirect jest drugim sposobem; ustawienie ignorowania adresów z kodu nadaje pierwszeństwo panelowi.

Do pozostania na tej samej stronie potrzebujesz obsługi fetch. Poradnik diagnostyczny pokazuje, jak odczytać odpowiedź.

Odbiór sprawdź na opublikowanej stronie

Wyślij rozpoznawalny test i znajdź go w zgłoszeniach właściwego formularza. Sprawdź email oraz spam. Następnie otwórz stronę na telefonie i sprawdź pola, przycisk i przekierowanie.

Połączenie Telegrama daje dodatkowy kanał. Odbiorców i przekierowania zmieniasz w panelu, bez ponownego publikowania HTML.

Po zmianie ochrony odśwież przykład

Włączenie Turnstile wymaga widżetu i tokena cf-turnstile-response. Sam honeypot z powyższego przykładu wtedy nie wystarczy. Pobierz aktualny kod z panelu.

Jeśli ustawisz dozwolone domeny, uwzględnij adres opublikowanej strony. Podgląd edytora może używać innej domeny.