21 marca 2020

Formularz kontaktowy WordPress

Kategoria: Web
Tagi: WordPress,
Autor: Paweł Mansfeld

Formularz kontaktowy WordPress

Główną zaletą wykorzystywania frameworków programistycznych i systemów CMS polega na tym, że w trakcie tworzenia strony nie trzeba wynajdywać koła na nowo. Choć opanowanie podstaw i umiejętność programowania formularza kontaktowego uważam za absolutną konieczność, to przy dziesiątej realizacji, tworzenie własnego pliku emailer.php, gdzie własnoręcznie pobieramy zmienne z POST i wysyłamy e-maila za pomocą funkcji mail() uważam za stratę czasu.

W WordPressie można co prawda stworzyć sobie własny plik emailer.php,w którym obsłużymy dowolny formularz kontaktowy jaki dodaliśmy na stronie. Warto być świadomym że WordPress dostarcza przydatnej funkcji wp_mail() która wiele rzeczy automatyzuje i pozwala rozwiązać wiele znanych i często pojawiających się problemów.

Dodawanie formularza kontaktowego do strony WordPress

Istnieje kilka sposobów stworzenia formularza kontaktowego na stronie WordPress. Jedna z nich będzie polegać na stworzeniu szablonu od podstaw pomijając całą logikę WordPressa a druga może polegać na wykorzystaniu wbudowanego mechanizmu wp_mail() czy wreszcie kompletnej wtyczki, która część back-endową (zapleczową) zrobi automatycznie za nas i ułatwi wstawienie formularza za pomocą przyjaznego edytora.

Tworzenie własnego formularza kontaktowego e-mail w szablonie

Możemy dodać kod HTML formularza do strony na wiele sposobów. Można wkleić kod bezpośrednio do pliku z szablonem lub na upartego wykorzystać edytor HTML w WordPressie.

<form action="emailer.php" method="POST">
<input type="email" name="email" placeholder="Twój e-mail">
<textarea name="message" placeholder="Twoja wiadomość"></textarea>
<input type="submit" value="Wyślij">
</form>

Bez poznawania wtyczek i mechanizmów WordPressa łatwo ostylujemy, dodamy własne atrybuty id oraz klasy do tworzonych pól. Możemy stworzyć proste zabezpieczenie Honeypot i wszystko powinno sprawnie działać.

Plik do obsługi e-maili może być prostym skryptem php, który umieszczamy w głównym katalogu WordPressa.

$email = $_POST["email"]; 
$message = $_POST["message"];

$header = "From: $email \nContent-Type:".
          ' text/plain;charset="UTF-8"'.
          "\nContent-Transfer-Encoding: 8bit";

 if(mail($to, "$subject", $message", $header)){
    echo "Wiadomość wysłana poprawnie";
 }

Za pomocą AJAX możemy nawet asynchronicznie wyświetlić informację z podziękowaniem za formularz. Sam kiedyś korzystałem z takiego rozwiązania.

Takie podejście ma oczywistą wadę, bo nie wykorzystujemy w pełni możliwości ekosystemu WordPress oraz dodatkowych wtyczek które mogą realizować proste ale bardzo przydatne funkcjonalności.

W przypadku kiedy nasz serwer nie obsługuje funkcji mail() – a przypomnijmy że coraz mniej dostawców udostępnia tę podstawową funkcję (która jednak często wykorzystywana przez spamerów) będziemy musieli cały kod przepisać aby wspierał SMTP czyli logowanie do istniejącego konta e-mail gdzie dopiero za jego pomocą wysyłamy e-maila do siebie.

Choć formularz nie jest niczym skomplikowanym, dopracowanie go i spełnienie wszystkich obecnie obowiązujących dobrych praktyk może powodować konieczność rozwiązywania szeregu problemów.

Test wtyczki Contact Form 7

Kiedy przejrzysz listę najpopularniejszych wtyczek do WordPressa, pierwsze miejsce od wielu lat jest okupowane przez wtyczkę Contact Form 7 autorstwa Takayuki Miyoshi. Choć część deweloperów może wzdrygać się na słowo “wtyczka”, Contact Form 7 to tak naprawdę elastyczne i przyjazne narzędzie które rozwiąże bardzo wiele problemów zarówno dla deweloperów jak i ich klientów.

Po instalacji wtyczki Contact Form 7, do głównego menu panelu administracyjnego WordPressa dochodzi nam link do specjalnej podstrony “Formularze”.

Pierwszy tab “Formularz” dostępny w widoku konfiguracji po kliknięciu “Dodaj nowy” umożliwia nam personalizować kod za pomocą prostego edytora, który zawiera mieszankę kodu HTML i makr WordPress (nawiasy kwadratowe), które obsługuje Contact Form 7.

To rewelacyjne posunięcie autora, które pozwala na proste stworzenie formularza osobom nietechnicznym jak i dowolne dostosowanie formularza i jego pól zaawansowanym deweloperom. Przyciski nad edytorem pozwalają wygenerować potrzebny kod automatycznie. Contact Form potrafi wygenerować pola typu:

  • tekst,
  • e-mail,
  • adres URL,
  • telefon,
  • liczba,
  • data,
  • obszar tekstowy,
  • menu rozwijane,
  • pola wyboru (checkbox),
  • pola jednokrotnego wyboru (radio),
  • checkbox do wyrażania zgody,
  • quiz,
  • plik,
  • przycisk do wysłania formularza.
Edycja formularza kontaktowego

Formularz kontaktowy WordPress z załącznikiem

Już samo dodanie pola z załącznikiem może sprawić problem przy własnoręcznym kodowaniu. Contact Form 7 podczas dodawania takiego pola zapyta nawet o limit wielkości pliku i dozwolone formaty:

Dodawanie pola z plikiem.

Edycja HTML i dostosowywanie atrybutów w Contact form 7

Jak widać na powyższym przykładzie, do każdego pola możemy dodać atrybut required, nadać mu własną nazwę, nadać ID i dodać niestandardowe klasy choćby do stylowania. Możemy też to zrobić w samym kodzie dodając atrybuty według dokumentacji lub obserwując jak zachowuje się kreator.

[email* your-email][email* email id:email class:form-control class:m-4 placeholder "Wpisz swój e-mail"]

Powyższy przykład jest polem wymaganym, dodano atrybut id “email” dodano dwie klasy form-control i m-4 który wykorzystuje stylowanie z Bootstrapa.

Z wyjątkiem pola e-mail, Contact Form 7 nie wymusza na nas wykorzystywania predefiniowanych shortcode‘ów. Możemy dodać zupełnie własny kod HTML, otoczyć pola siatką Bootstrap i dodatkowymi divami. Contact Form 7 doda kod bez zniekształceń przekazując wartości do skryptu obsługującego wysłanie e-maila. Przykładowo mój obecny formularz:

…zakodowałem w Contact Form 7 w ten sposób:

Swobodna edycja kodu HTML formularza w Contact Form 7

Widać dodatkowe divy z Bootstrapa i własne klasy, które bez zniekształcenia są drukowane na froncie. Oczywiście usuwamy tag <form> – ten jest generowany przez Contact Form automatycznie. Jednak także tutaj jest możliwe dodanie własnej klasy. Wystarczy w miejscu instalacji formularza dodać do jego makra własne opcje:

[contact – form-7 id=”15950″ title=”Kontakt” html_id=”wlasny_id” html_class=”wlasna_klasa”]

Uważam, że to właśnie dzięki nieskrępowanej możliwości edycji formularza Contact Form 7 zyskał sobie tylu zwolenników pozostając od lat najpopularniejszą wtyczką WordPress.

Komponowanie e-maila z wiadomością

Kiedy stworzymy wszystkie pola a formularz wygląda tak jak trzeba, należy skomponować e-maila, który będzie wysyłany za każdym razem kiedy ktoś skorzysta z naszego formularza – w końcu o to nam od początku chodzi. W następnej zakładce E-mail mamy pola do wpisania własnego e-maila oraz określenia jej tematu.

Ustawienia e-mail w Contact Form 7

Contact Form 7 oczywiście zawiera domyślną treść. Którą możemy dostosować do swoich potrzeb lub rozszerzyć o dodatkowe pola. Jest to bardzo intuicyjne i łatwe.

Personalizacja komunikatów i inne ustawienia interakcji

W przedostatniej zakładce mamy jeszcze ciągi z komunikatami. To bardzo przydatna opcja która powoduje, że wtyczkę Contact Form 7 można używać na stronach WordPress w wielu wersjach językowych. Przy zakupie WPML otrzymujemy dodatkową wtyczkę która rozszerza tego typu możliwości pod tym kątem.

Odpowiedzi można dostosowywać w ramach osobnych formularzy co powoduje, że można użyć Contact Form 7 także w innych przypadkach gdzie chcemy przetwarzać dane wpisywane do formularzy.

Edycja komunikatów w Contact Form 7

Ostatnia zakłada służy do dodawania własnych ustawień. Można tam wpisać dodatkowe parametry, które będą wpływać na konkretnie ten formularz.

subscribers_only: true
demo_mode: on
skip_mail: on
acceptance_as_validation: on
do_not_store: true

Po kolei mamy:

  1. Subscribers Only – możliwość wysłania formularza tylko przez zalogowanych użytkowników,
  2. Demo Mode, w którym interakcja jest zachowana ale nie dochodzi do przetworzenia wiadomości.
  3. Skip Mail, który zachowuje działanie formularza z pominięciem wysłania e-maila.
  4. Acceptance as Validation – wymaga zaznaczenia pola akceptacji (np. RODO)
  5. Do Not Store – pomija przechowywanie wiadomości z konkretnego formularza przez współpracujące wtyczki np. Flamingo.

Dodatkowo możemy tam umieścić odwołania do akcji on_sent_ok i on_submit. Jest to przydatne kiedy chcemy śledzić konwersje z formularzy w Google Analytics. Prosty przykład wykorzystania:

on_sent_ok: "alert('Poprawnie wysłano e-mail');"
on_submit: "alert('Przetworzono formularz');"

Umieszczanie formularza Contact Form 7 na stronie WordPress

Tak stworzony formularz umieszczamy w dowolnym miejscu na stronie – można to zrobić na stronie, w treści wpisu a nawet w widgecie za pomocą kodu shortcode, [contact – form-7… który pojawia się w niebieskim polu u góry strony konfiguracji. Wbudowana w WordPressa funkcja do_shortcode(); zamienia stworzony kod na postać HTML.

Formularz kontaktowy WordPress nie działa?

Nie wszystkie hostingi umożliwiają wysłać e-maila za pomocą wbudowanej funkcji wp_mail, która bazuje na funkcji mail w PHP. Czasem trzeba wykonać logowanie na istniejące konto e-mail. To częsta praktyka, która ma na celu utrudnić życie spamerom.

Dodatkowym problemem może być to, że e-mail służący do zresetowania hasła też nie działa. Na szczęście wykorzystując Contact Form 7 mamy możliwość bardzo łatwego poradzenia sobie z tym problemem.

Wysyłanie e-mail po SMTP w WordPress

Aby bez problemu wysyłać wiadomości e-mail za pomocą metody bazującej na mechanizmie SMTP należy doinstalować drugą popularną wtyczkę, która po prostej konfiguracji automatycznie załatwi sprawę. Wystarczy wykorzystać jedną z dwóch wtyczek: WP Mail SMTP by WPForms lub Easy WP SMTP. Używam tej pierwszej na mojej anglojęzycznej stronie internetowej.

Test wtyczki WP Mail SMTP

Po krótkiej konfiguracji e-maile powinny działać.

Konfiguracja wtyczki WP Mail SMTP

Jeżeli nie wiesz jakie wartości wpisać w pola po prostu sprawdź w samouczkach dostawcy hostingu jakie dane należy wpisywać w programach do obsługi poczty e-mail lub skontaktuj się z nim aby pomógł Ci wypełnić pola.

Zapisywanie wysłanych e-maili w bazie WordPressa

E-mail to zewnętrzna usługa, która chwilowo może przestać działać lub z jakiegoś innego powodu e-maile nie będą działać. Może być też przypadek, że zwyczajnie nie chcemy zaśmiecać sobie skrzynki wiadomościami pochodzącymi z formularza kontaktowego na stronie i chcemy je mieć poukładane w jednym miejscu. Czy jest na to sposób? Oczywiście że tak. Tutaj z pomocą przychodzi kolejna wtyczka, która świetnie się dogaduje z Contact Form 7 a jest nią Flamingo.

Flamingo realizuje dwie bardzo pomocne funkcje. Jedna z nich to prowadzenie czytelnego rejestru wysyłanych wiadomości w formularzu kontaktowym WordPress.

Rejestr wiadomości z formularza kontaktowego za pomocą wtyczki Flamingo

Druga funkcja to prowadzenie listy wszystkich osób które skorzystały z formularza. W ten sposób umożliwia przeistoczyć Contact Form 7 w narzędzie do zbierania e-maili użytkowników kiedy nie korzystamy z innych dedykowanych narzędzi.

Aby Flamingo współpracowało z Contact form 7 i wyświetlało dane na liście wpisów wystarczy zostawić oryginalne nazwy pól jakie użyto w tym domyślnym formularzu. Mowa o: your-name, your-email, your-subject.

Zabezpieczenie antyspamowe Contact Form 7

Kiedy nasza strona jest troszkę popularniejsza, po umieszczeniu formularza kontaktowego od razu będziemy atakowani spamerskimi wiadomościami. Na szczęście z tym problemem też możemy sobie poradzić tworząc quiz, wykorzystując metodę Honeypot lub wykorzystując Google Recaptcha.

Uważam, że quiz jest mało poważny i troszkę obnaża niewiedzę twórcy strony. Google Recaptcha też nie jest dobrym rozwiązaniem bo dodaje mnóstwo niepotrzebnego kodu a nasz formularz jest uzależniony

  • od konta Google,
  • i zewnętrznej usługi która w najmniej nieodpowiednim momencie może przestać działać.
  • mechanizm czasem prosi o wykonywanie quizu, co jest mało wygodne i może powodować frustrację.

Nie polecam metody recaptcha ponieważ komplikuje prosty formularz i dodaje sporo kodu, który spowalnia całą stronę. Przy zwykłym formularzu kontaktowym jest to zabijanie muchy przy pomocy kija bejsbolowego. Uzależnianie ważnego formularza na stronie od zewnętrznej usługi jest dla mnie – jako dewelopera – nie do przyjęcia. Warto z niej skorzystać dopiero wtedy, kiedy wszystkie inne metody się nie sprawdzają.

Genialna w swojej prostocie jest technika Honeypot. Honeypot dodaje dodatkowe pole, które jest niewidoczne dla użytkownika a widoczne dla robotów. Roboty wypełniają wszystkie pola aby mieć pewność że e-mail przejdzie. Kiedy mechanizm Honeypot odkryje że pole, które widzą tylko roboty jest wypełnione e-mail nie jest wysyłany. Zaletą Honeypot jest to, że jest to technika niebywale skuteczna i jest niewidoczna dla zwykłego użytkownika.

Aby zwiększyć skuteczność tej techniki, należy polu przypisać nazwę email, user-email lub coś w tym stylu. Jeżeli nie korzystamy z Flamingo, właściwemu polu możemy nadać jakąś całkiem inną nazwę np. color. Wtedy spamerskie skrypty na 100% nie poradzą sobie z takim formularzem.

Instalujemy wtyczkę Honeypot for Contact Form 7. Dodajemy dodatkowe pole do naszego formularza i nadajemy mu nazwę email (zakładając że prawdziwe pole do wpisania e-maila to your-email).

Dodawanie przynęty Honeypot

Zapisujemy formularz i wszystko powinno działać. Od tej pory nie będą cię nękać spamerskie wiadomości, które do tej pory trafiały za pomocą formularza kontaktowego. Roboty będą wypełniać to pole z obawy przed niewypełnieniem ważnego pola a WordPress będzie takie wiadomości ignorował.

Optymalizacja kodu CSS i JS wtyczki Contact Form 7

Jedną z drobnych wad wtyczki Contact Form 7 jest to, że dodaje ona swój kod CSS i JS do każdej podstrony WordPress. Co prawda nie waży on dużo, ale na stronach które osiągają 100 punktów w PageSpeed Insights będą pogarszać wynik o kilka punktów. Na szczęście możemy sobie z tym łatwo poradzić za pomocą łatki, którą udostępniam poniżej – można ją wkleić w functions.php lub stworzyć własną wtyczkę WordPress.

function remove_cf7_assets(){
    wp_reset_query();
    if(!is_page("kontakt")){
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
    }  
}
add_action("wp", "remove_cf7_assets");    

Kod ten usunie skrypty Contact Form 7 na innych stronach niż Kontakt. Jeżeli strona, na której znajduje się formularz ma inna nazwę w adresie URL, należy podmienić słowo “kontakt” w trzeciej linijce na właściwy slug.

Alternatywne wtyczki formularzy kontaktowych dla WordPressa

Choć zdecydowanie pozostanę przy Contact Form 7 – bo jest to sprawdzona i przez lata dopracowana wtyczka, która dostarcza wszystkiego czego potrzeba – warto wspomnieć, że istnieją alternatywne rozwiązania.

  • Contact Form by WPForms – Drag & Drop Form Builder for WordPress,
  • Ninja Forms Contact Form,
  • Advanced Forms.

Na szczególną uwagę zasługuje ta ostatnia, która umożliwia tworzyć bardzo złożone formularze wykorzystując sposób budowania formularzy znany z rozwiązania Advanced Custom Fields PRO. Możliwość dołączania pól powtarzalnych i wprowadzenie logiki “ukryj/pokaż jeżeli” umożliwia stworzyć niemal dowolnie skomplikowany formularz a zapis wysłanych formularzy jest już wbudowany.

Zalety wykorzystania wtyczek do formularzy kontaktowych

  • wygląda dokładnie tak jak tego chcemy,
  • potrafi wysyłać e-maile po SMTP,
  • zapisuje wiadomości na wypadek utraty dostępu do skrzynki,
  • jest odporny na spam,
  • filtruje dane w celu bezpieczeństwa,
  • waliduje dane w celu zachowania ich poprawności,
  • ułatwiają osobom nietechnicznym łatwo dodać pola lub zmienić napisy

Podsumowanie

Jak widać, jest wiele zalet wykorzystania wtyczki do obsługi formularza kontaktowego w WordPressie. Co prawda trzeba poświęcić czas na zaznajomienie się z tymi narzędziami ale szybko się to spłaca w postaci znacznie ułatwionej pracy z formularzami kontaktowymi.

Kodowanie od początku całej procedury ze wsparciem SMTP lub tym bardziej, zapisywanie wiadomości do bazy WordPressa wymagałoby poświęcenia sporej ilości czasu. Do tego dochodzi stworzenie mechanizmu Honeypot i walidacja a przy każdej konieczności nawet drobnej zmiany w formularzu, musielibyśmy grzebać w kodzie. To, że potrafimy stworzyć własny skrypt jest super ale to nie oznacza, że powinniśmy go pisać dla tak popularnych przypadków w projekcie dla klienta. Za pomocą sprawdzonych i lekkich wtyczek szybko wdrożyliśmy formularz który jest niezawodny, bezpieczny i pozwala na jego dostosowanie i umieszczanie w dowolnym miejscu personelowi, który zajmuje się edycją strony.

Przykład – z mogłoby się wydawać – banalnym formularzem kontaktowym świetnie ilustruje w czym tak naprawdę tkwi istota integracji stworzonej strony z popularnym CMSem i wtyczkami. Najczęstsze potrzeby deweloperów i klientów są już dawno rozwiązane w najlepszy możliwy sposób. Zostały przetestowane w kilku milionach przypadków i po prostu opłaca się z tych rozwiązań korzystać. Zaoszczędzony czas i koszty można teraz spożytkować w innych aspektach tworzenia strony, które wymagają faktycznie autorskich rozwiązań i indywidualnego podejścia.

Źródła

https://developer.wordpress.org/reference/functions/wp_mail/

Oceń artykuł na temat: Formularz kontaktowy WordPress
Średnia : 4.6 , Maksymalnie : 5 , Głosów : 16


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *




Komentarze

Paweł

23 marca 2020

Dzień dobry, bardzo przydatny artykuł zwłaszcza w części dotyczącej pozbycia się spamu. Ja dotychczas korzystałem z rechptcha, teraz przełączam się na opisaną wtyczkę honeypot.
Przy okazji pytania x 2:

  1. jak najprościej w contact form 7 zrobić dwa pola obok siebie
  2. czy korzystając z formularzy w elementor pro można zrobić zabezpieczenie antyspamowe coś jak honeypot. Nadmienię, że formularze w elementor pro nie korzystają z wtyczki contact form 7.

Paweł Mansfeld

23 marca 2020

Dzień dobry, dziękuję za miłe słowa. Dwa pola obok siebie możemy zrobić w Contact Form 7 na wiele sposobów. Najprościej otoczyć je divami z klasą col-sm-6 jeżeli korzystamy z Bootstrapa. Można też dodać własną klasę np. half i dodać w pliku style.css coś w rodzaju:

 .half{
   width:50%;
   float:left;
}
Nowa wersja Elementora ma pole o nazwie "Honeypot" wystarczy dodać pole do formularza i poszukać w liście rozwijalnej.

 

Wykryto brak połączenia z Internetem.