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.

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:

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:

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.

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.

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');"

Metody te nie są wspierane od wersji 7.5.0 zamiast tego można użyć zdarzeń DOM:

• wpcf7invalid — próba wysłania niepoprawnego formularza,
• wpcf7spam — zdarzenie, które ma miejsce w przypadku wykrycia spamu,
• wpcf7mailsent — wysłanie poprawnego formularza i potwierdzenie wysłania e-maila,
• wpcf7mailfailed — ma miejsce kiedy formularz został przesłany poprawnie ale z jakiegoś powodu nie wysłano maila,
• wpcf7submit — to zdarzenie ma miejsce wtedy kiedy poprawnie wysłano formularz bez względu na inne incydenty.

Przykład wykorzystania:

var elementWpcf7 = document.querySelector( '.wpcf7' );
 elementWpcf7.addEventListener( 'wpcf7submit', function( event ) {
   console.log( "Wysłano formularz" );
 }, false );

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

Jeżeli chcemy wykorzystywać SMTP do wysyłania e-maili w WordPressie, musimy w jakiś sposób podać WordPressowi dane do naszej skrzynki e-mail oraz wszelkie potrzebne dane takie jak adres hosta czy port. Służy do tego akcja phpmailer_init.

 add_action( 'phpmailer_init', 'my_smtp_email' );
     function my_smtp_email( $phpmailer ) {
         $phpmailer->isSMTP();
         $phpmailer->Host       = SMTP_HOST;
         $phpmailer->SMTPAuth   = SMTP_AUTH;
         $phpmailer->Port       = SMTP_PORT;
         $phpmailer->Username   = SMTP_USER;
         $phpmailer->Password   = SMTP_PASS;
         $phpmailer->SMTPSecure = SMTP_SECURE;
         $phpmailer->From       = SMTP_FROM;
         $phpmailer->FromName   = SMTP_NAME;
     }

Gdzie poszczególne stałe kodujemy na sztywno w tym samym pliku lub w pliku wp-config.php np. w taki sposób:

define( 'SMTP_HOST', 'smtp.przykladowa-domena.com' );

Taki kod może sprawiać trudność w edycji przeciętnemu klientowi dlatego można 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ć.

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.

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ć. Możemy wykorzystać następujące rozwiązania:

• Akismet,
• Honeypot,
• CAPTCHA np. reCAPTCHA.

Akismet w Contact Form 7

Akismet to system antyspamowy, który jest wyspecjalizowany do blokowania spamu w komentarzach i formularzach wysyłanych w systemach WordPress. Akismet jest utrzymywany przez twóców Google i jego działanie jest w pełni automatyczne. Jest to skuteczna i działająca całkowicie w back-endzie usługa antyspamowa, która nie spowalnia strony ani nie dodaje do front-endu dodatkowego kodu CSS/JS. Akismet to rozwiązanie płatne ale można korzystać z darmowej subskrypcji w przypadku serwisów niekomercyjnych.

Honeypot w Contact Form 7

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).

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ł.

reCAPTCHA w Contact Form 7

Kolejnym techniką jest CAPTCHA. Stworzona przez Google technologia reCAPTCHA pozwala na szybkie i łatwe zintegrowanie formularza Contact Form 7 ze skutecznym i działającym w tle systemem CAPTCHA opartym o uczenie maszynowe. Aby zintegrować Contact Form 7 z reCAPTCHA należy wygenerować Klucz witryny i Tajny klucz reCAPTCHA na stronie https://www.google.com/recaptcha/admin/create

Wygenerowane klucze wprowadzamy w Ustawieniach Contact Form 7 na stronie Integracje:

NA stronie z formularzem powinna być widoczna ikonka reCAPTCHA, która po najechaniu wyświetla linki do stron dotyczących zasad prywatności i warunków usługi:

Wadą tej metody jest fakt, że wtyczka musi dodać do front-endu strony internetowej dość spory plik JavaScript, który integruje stronę z serwisem zewnętrznym a to może znacząco obniżyć wydajność strony i wyniki w PageSpeed Insights. Na szczęście, istnieją stosunkowo proste techniki aby zminimalizować negatywny wpływ kodu na wydajność a nawet całkowicie wyeliminować go na podstronach gdzie nie ma formularza i nie jest on w ogóle potrzebny. Rozwiązanie tego problemu prezentuję w kolejnym podrozdziale.

Optymalizacja kodu CSS i JS wtyczki Contact Form 7

Nawet jeżeli nie używamy jakichkolwiek technik antyspamowych to jedną z drobnych wad wtyczki Contact Form 7 jest to, że dodaje ona swój podstawowy 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 mogą 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. Wszelkie wtyczki, które integrujemy z Contact Form 7 można wyłączyć za pomocą podobnej metody przy użyciu instrukcji wp_dequeue_script() oraz wp_dequeue_style().

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 edytować sporą ilość kodu. 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/,
• https://contactform7.com/docs/