Gotowy formularz kontaktowy HTML z wysyłką na maila

Kod formularza kontaktowego HTML

1. Załóż darmowe konto w Formgong i skopiuj klucz dostępu formularza.
2. Wklej kod w miejscu, gdzie ma się pojawić formularz, i zamień fk_your_access_key na swój klucz.
3. Opublikuj stronę i wyślij testowe zgłoszenie. Wiadomość przyjdzie na adres e-mail konta.

<style>
  .fg-form label { display: block; margin: 0 0 12px; }
  .fg-form input:not([type="checkbox"]), .fg-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px; font: inherit; }
  .fg-form textarea { min-height: 120px; }
  .fg-form small { display: block; margin-top: 10px; opacity: .75; }
</style>
<form class="fg-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">
  <input type="hidden" name="_subject" value="Nowa wiadomość ze strony">
  <!-- Opcjonalnie: własna strona z podziękowaniem -->
  <!-- <input type="hidden" name="_redirect" value="https://twoja-strona.pl/dziekujemy"> -->
  <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;left:-10000px;width:1px;height:1px;overflow:hidden">
    <label>Pozostaw to pole puste<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
  </div>
  <button type="submit">Wyślij</button>
  <small>Wysyłając formularz, przekazujesz nam swoje dane, abyśmy mogli odpowiedzieć. Szczegóły: <a href="/polityka-prywatnosci">polityka prywatności</a>.</small>
</form>

Pole telefonu jest opcjonalne. Usuń je albo dodaj własne pola: każde pole z atrybutem name pojawi się w mailu.

Jak to działa bez PHP

Atrybut action wysyła dane metodą POST do Formgong. Ukryte pola sterują obsługą zgłoszenia:

• access_key wskazuje Twój formularz i adres, na który przyjdzie mail;
• _lang ustawia język strony z podziękowaniem i automatycznej odpowiedzi;
• _subject ustawia temat maila;
• _redirect (opcjonalnie) przekierowuje na Twoją stronę z podziękowaniem. Bez niego odwiedzający zobaczy stronę Formgong z podziękowaniem.

Formularz PHP z funkcją mail() wymaga hostingu z PHP i poprawnej konfiguracji poczty, a takie maile często lądują w spamie. Tutaj tego nie potrzebujesz: kod działa także na hostingu statycznym, w kreatorach stron i w CMS-ach.

Ochrona przed spamem bez uciążliwej captchy

• Honeypot (botcheck) działa zawsze, także na darmowym planie. Zgłoszenia od botów trafiają do osobnej zakładki i nie liczą się do limitu.
• Jeśli spamu jest dużo, włącz Cloudflare Turnstile. Jest dostępny na planie Free.
• Na planach Pro i Business możesz ograniczyć formularz do własnych domen.

Formularz a RODO

Kod zawiera krótką informację z linkiem do polityki prywatności. Zgłoszenia są przechowywane w UE (Cloudflare D1 z jurysdykcją UE), a adres IP tylko jako skrót. Ty pozostajesz administratorem danych, a Formgong podmiotem przetwarzającym; dostępny jest wzór umowy powierzenia.

Wzór klauzuli informacyjnej i zasady dotyczące checkboxa zgody opisaliśmy w poradniku formularz kontaktowy zgodny z RODO.

Gdzie wkleić formularz

• zwykła strona HTML lub hosting statyczny: wklej kod do pliku, np. kontakt.html (instrukcja HTML);
• WebWave: element „Dowolny HTML, CSS, JS” (instrukcja dla WebWave);
• WordPress: blok „Własny HTML” (instrukcja dla WordPressa);
• inne kreatory: każdy element, który pozwala wkleić własny kod HTML.

Dodatek: zgłoszenia w Telegramie

W panelu Formgong możesz podłączyć Telegram: zgłoszenia przyjdą wtedy jednocześnie na maila i do czatu, prywatnego lub grupowego. Nie musisz szukać identyfikatora czatu, a przyciski pod wiadomością pozwalają oznaczyć spam albo zmienić status zgłoszenia. Wszystkie zgłoszenia są też w skrzynce w panelu, z eksportem do CSV.