Formularz mailto czy backend formularzy?

Co naprawdę robi formularz mailto

Zwykły formularz wysyła pola pod adres w sieci. Formularz mailto ma w atrybucie action adres e-mail. Standard HTML opisuje, co wtedy robi przeglądarka. Nigdy nie wysyła wiadomości za Ciebie.

• Przy method="GET" przeglądarka zamienia pola na temat i nagłówki nowej wiadomości.
• Przy method="POST" pola trafiają do treści wiadomości. Z enctype="text/plain" da się ją przeczytać. Bez tego tekst jest zakodowany jak w adresie URL.

W obu przypadkach otwiera się program pocztowy ze szkicem. Odwiedzający musi jeszcze kliknąć „Wyślij” w tym programie. Strona nie dostaje odpowiedzi, więc nie wie, czy coś wyszło.

Dlaczego formularz mailto gubi wiadomości

Każdy krok po kliknięciu zależy od urządzenia odwiedzającego. Właśnie tam giną wiadomości:

• Brak programu pocztowego. Wiele osób czyta pocztę w karcie przeglądarki, np. w Gmailu czy Onecie. Bez domyślnego programu kliknięcie może nic nie zrobić. Albo system zapyta, czym otworzyć link.
• Nikt nie kliknął „Wyślij”. Szkic się otworzył, a ktoś go zamknął, coś go rozproszyło albo uznał, że formularz już wszystko wysłał.
• Brak potwierdzenia. Strona nie pokaże „Dziękujemy, mamy Twoją wiadomość”, bo nie zna wyniku.
• Brak kopii. Nic się nie zapisuje, więc zgubiona wiadomość przepada.
• Adres na widoku. Twój e-mail jest w kodzie strony, skąd zbierają go boty spamowe.
• Nieczytelna treść. Bez text/plain przychodzi coś w stylu name=Anna&message=Dzien%20dobry.

Do tego odwiedzający pisze z prywatnej skrzynki. Nie każdy chce ją podawać firmie, której jeszcze nie zna.

Kiedy link mailto jest w porządku

Link mailto to co innego niż formularz mailto. Link jest uczciwy: ktoś klika „Napisz do nas” i spodziewa się, że otworzy się poczta. Dobrze działa jako druga forma kontaktu obok formularza.

W linku możesz z góry wpisać temat i pierwszą linijkę treści. Format opisuje RFC 6068. Polskie znaki, spacje i nowe linie trzeba zakodować, bo inaczej część programów utnie tekst.

<!-- Polskie znaki, spacje i nowe linie są zakodowane jako UTF-8. -->
<a href="mailto:hello@example.com?subject=Zapytanie%20o%20projekt&body=Dzie%C5%84%20dobry%2C%0D%0A%0D%0Achcia%C5%82bym%20zapyta%C4%87%20o">
  Napisz do nas o projekcie
</a>

Zamień formularz mailto na działający

Pola zostają te same. Zmieniasz dwie rzeczy: action i ukryty klucz. Formularz wysyła wtedy dane do backendu formularzy. Backend zapisuje wiadomość, wysyła Ci e-mail i pokazuje odwiedzającemu stronę z podziękowaniem. Nic nie zależy już od jego programu pocztowego.

Przykład poniżej korzysta z Formgong. Zamień fk_your_access_key na klucz z panelu. Pole _lang ustawia język strony z podziękowaniem, a _subject temat powiadomienia. Ukryte pole botcheck łapie proste boty. Twojego adresu nie ma już w kodzie strony.

<!-- Było: <form action="mailto:you@example.com" method="POST" enctype="text/plain"> -->
<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">
  <label>Imię <input type="text" name="name" required autocomplete="name"></label>
  <label>E-mail <input type="email" name="email" required autocomplete="email"></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%)">
    <input type="text" name="botcheck" tabindex="-1" autocomplete="off">
  </div>
  <button type="submit">Wyślij</button>
</form>

Inne sposoby odbierania danych z formularza

• Backend formularzy. Zmieniasz action i gotowe. Tak działają Formgong, Formspree, Web3Forms i inne. Różnice w limitach i funkcjach pokazuje porównanie usług formularzy.
• Własny skrypt. Plik PHP albo funkcja serverless odbiera formularz i wysyła e-mail. Masz pełną kontrolę, ale dostarczalność poczty i spam też są na Twojej głowie.
• Gotowy formularz w zewnętrznej usłudze. Google Forms i podobne dają link albo osadzenie. Szybko, ale wygląda jak ich produkt, a nie Twoja strona.

Cały formularz krok po kroku opisujemy w artykule formularz kontaktowy HTML bez backendu. Wszystkie ukryte pola Formgong znajdziesz w dokumentacji HTML.

Sprawdź formularz przed publikacją

Wklej kod formularza do darmowego sprawdzania formularzy. Narzędzie oznacza jako błąd action, który nie jest adresem w sieci, np. mailto:. Sprawdza też nazwy pól, metodę i pole-pułapkę.

Potem wyślij prawdziwą wiadomość testową z opublikowanej strony, z telefonu i z laptopa. Upewnij się, że e-mail dochodzi, a odwiedzający widzi jasną stronę z podziękowaniem.