Formularz kontaktowy bez backendu
Tylko HTML, Javascript i jQuery(opcjonalnie).
Podczas DSP2017 tworzyłem formularz kontaktowy dla jaki-jezyk-programowania.pl z wykorzystaniem PHP, który działał na wykupionym serwerze. Później jednak przeniosłem swoją stronę i bloga na Github Pages, gdzie z PHP już nie można było zrobić użytku. Wysyłanie wiadomości email bez backendu wydawało mi się niemożliwe i myślałem, że już muszę zrezygnować z formularza kontaktowego na stronie. Jednak na ratunek przyszła mi strona formspree.io, za pośrednictwem której możliwe jest wysyłanie wiadomości email na dowolnego maila.
Ten sposób już nie działa jako że formspree ograniczyło darmowe funkcje i asynchroniczne żądanie, czyli bez przeładowania strony, nie zadziała. Nadal można korzystać z formspree w tradycyjny sposób.
Co zawiera i jak działa formularz?
Formularz jest ulepszoną wersją tego, który tworzyłem podczas DSP2017. Tyle, że bez PHP. Jednak jeśli nie widziałeś wcześniejszych postów to:
- Jest otwierany w formie okienka za pomocą przycisku.
- Jest wysyłany asynchronicznie, wykorzystując AJAX - czyli bez przeładowania strony.
- Walidacja odbywa się w Javascript z wykorzystaniem Validation API. Gdy coś jest nie tak, użytkownik dostaje wiadomość.
- Zadbałem też o kwestie dostępności, np. komunikaty mogą być odczytane przez czytniki ekranowe, obsługa klawiaturą (m.in. zamykanie ESC czy zapętlone tabowanie) itd.
- Jest w pełni responsywny - poprawnie wyświetla się na każdym ekranie.
- Formularz można też otworzyć z linka, np. jaki-jezyk-programowania.pl/#formularz-kontaktowy
Udostępniam go na Githubie w osobnym repozytorium. Podejrzyj online tutaj. Możesz go wykorzystać na swojej stronie. Jedyne czego wymaga to HTML, Javascript i jQuery - ale praktycznie tylko do AJAX. Jeśli nie używasz na swojej stronie jQuery nie ma sensu dołączać tej kobyły tylko do tego. Możesz przepisać to z użyciem czegoś lżejszego lub w czystym Javascriptcie.
Kroki, które musisz wykonać
Pliki
Pobierz paczkę z Githuba. Umieść plik JS i CSS w swoim projekcie.
Przygotowanie strony z formularzem
Otwórz plik index.html, skąd będziesz mógł wziąć potrzebne elementy. Zamieszczę je również tutaj, ale z czasem mogą ulec zmianie, więc lepiej je brać bezpośrednio z index.html.
I tak jak w tym pliku, w sekcji <head>
na swojej stronie załącz arkusz styli CSS, reCAPTCHA i Font Awesome - jeśli chcesz mieć ładne ikonki:
Przed końcem sekcji <body>
załącz formularz:
oraz jQuery i plik JS z obsługą formularza:
Następnie umieść przycisk do otwierania formularza w wybranym przez siebie miejscu:
Twój email i site key
Podaj twój email w atrybucie action
formularza:
Zdobądź reCAPTCHA V2 site key i kopiuj wklej go do atrybutu data-sitekey
w:
Ostatni krok
Użyj formularza i wyślij pierwszą wiadomość - obojętnie co. Dostaniesz maila od formspree.io, gdzie będziesz mógł potwierdzić, że chcesz otrzymywać maile ze swojej strony.
I gotowe. Od tej pory wszystkie maila wysłane za pomocą tego formularza będą trafiać na twoją skrzynkę.