Jak dodać formularz kontaktowy w WordPress krok po kroku

Jak dodać formularz kontaktowy w WordPress? Wystarczy zainstalować wtyczkę do formularzy, zbudować krótki formularz z polami: imię, e-mail i wiadomość, a następnie wstawić go na stronę blokiem tej wtyczki. Pierwsze trzy kroki zajmują dziesięć minut. Ostatni krok, czyli dostarczenie wiadomości, to miejsce, w którym większość formularzy po cichu zawodzi, i właśnie jemu ten folio poświęca najwięcej uwagi.

WordPress w rdzeniu nie ma bloku formularza. Blokowy motyw daje czystą stronę, grupę, układ kolumn i przycisk, ale nic, co zbiera i wysyła dane. Prawdziwe pytanie brzmi więc: którą wtyczkę wybrać i jak skonfigurować dostarczanie wiadomości.

Czy do formularza kontaktowego w WordPressie potrzebna jest wtyczka?

Tak, jeśli formularz ma działać długo. Można napisać surowy formularz HTML i handler w PHP w motywie potomnym, a samouczki, które to pokazują, są poprawne. Handler musi jednak sam obsługiwać walidację, filtrowanie spamu, weryfikację nonce, escapowanie, zapis danych i komunikaty o błędach. To mały projekt wtyczkowy, którym trzeba się potem opiekować.

Na stronie klienta koszt utrzymania rozstrzyga sprawę. Handler napisany w 2024 roku będzie działał na stronie w 2028, długo po tym, jak ktoś zapomni, jak radzi sobie z nieudanym wysłaniem. Utrzymywana wtyczka dostaje poprawki bezpieczeństwa, o które nie trzeba myśleć.

Ta decyzja ma też wymiar bezpieczeństwa. Surowy handler, który nie sprawdza nonce, łatwo staje się furtką do wysyłania spamu przez stronę, a naprawa takiego błędu zwykle przychodzi wtedy, gdy klient zgłasza, że jego domena trafiła na listy spamowe.

Surowy formularz warto stosować tylko wtedy, gdy sam formularz jest częścią produktu, na przykład w wtyczce albo w bardzo nietypowym przepływie pracy. W pozostałych przypadkach to zbędne ryzyko.

Którą wtyczkę do formularzy wybrać w WordPressie?

Pięć wtyczek pokrywa niemal każdy przypadek. Wybór powinien zależeć od tego, co dzieje się po wysłaniu formularza, a nie od galerii szablonów.

• Blok Jetpack Form: natywny blok, nie wymaga nauki, dobry do prostej strony kontaktowej. Jest powiązany z Jetpackiem, czego nie chcą niektórzy klienci.

• WPForms Lite: kreator metodą przeciągnij i upuść z przyjaznym interfejsem. Logika warunkowa i płatności znajdują się w płatnych pakietach.

• Fluent Forms: szeroki darmowy pakiet i szybki kreator, dobry dla agencji, które używają tych samych formularzy na wielu stronach.

• Contact Form 7: darmowa i lekka, konfigurowana przez szablon tekstowy. Nie ma wizualnego kreatora, więc przekazanie jej klientowi to słaby pomysł.

• Gravity Forms: tylko płatna, z najlepszym ekosystemem dodatków i programistów. Dobra do formularzy wieloetapowych i rozbudowanych integracji.

Na zwykłej stronie kontaktowej w motywie blokowym wystarczy Fluent Forms lub blok Jetpack. Jeśli formularz zasila CRM, sięgnij po Gravity Forms albo WPForms Pro i przestań porównywać.

Dokumentacja Jetpacka pokazuje działanie bloku formularza w edytorze, także w stopce i w szablonach. To przydatne, nawet jeśli wybierzesz inną wtyczkę.

Jak zbudować sam formularz?

Zainstaluj i aktywuj wtyczkę z menu Wtyczki > Dodaj nową, a następnie utwórz nowy formularz z szablonu „Contact” lub „Simple”. Zanim otworzysz kreator, rozpisz pola na papierze. Każde dodatkowe pole zmniejsza liczbę osób, które dokończą wysyłanie.

Formularz, który dobrze działa na większości małych stron, ma cztery pola: imię, e-mail, pole wiadomości i opcjonalnie temat lub listę wyboru, jeśli skrzynka wymaga segregacji. Pole numeru telefonu jest zabójcą konwersji, chyba że faktycznie oddzwaniasz do ludzi.

Trzy ustawienia znaczą więcej niż układ.

Po pierwsze, jako wymagane zaznacz tylko e-mail i wiadomość. Po drugie, wpisz prawdziwe etykiety nad polami, a nie tekst zastępczy w środku. Placeholder znika podczas pisania i słabo wypada w testach kontrastu, co ma znaczenie przy WCAG 2.2. Po trzecie, ustaw potwierdzenie jako komunikat na tej samej stronie, a nie przekierowanie, chyba że potrzebujesz adresu strony podziękowania do śledzenia.

Jeśli witryna obsługuje język arabski lub hebrajski, przetestuj formularz w trybie RTL przed wdrożeniem. Etykiety i przycisk poprawnie się odwracają w większości wtyczek, gdy język witryny ustawiono na lokalizację RTL. Pole e-mail nie zawsze podąża za tym układem. Adresy e-mail to ciągi pisane od lewej do prawej, więc wymuś dir="ltr" na tym polu prostą regułą CSS lub opcją atrybutu w wtyczce. Inaczej kursor przeskakuje podczas wpisywania znaku małpy.

Jak dodać formularz do strony w edytorze blokowym?

Utwórz stronę o nazwie „Kontakt”, otwórz wstawiacz przyciskiem plusa i wyszukaj nazwę swojej wtyczki. Każda poważna wtyczka formularzy rejestruje własny blok. Wybierz go, wskaż zbudowany formularz i opublikuj stronę.

Można też umieścić formularz w innym miejscu. W edytorze witryny otwórz Wygląd > Edytor, wybierz część szablonu, na przykład stopkę albo szablon strony, i wstaw ten sam blok. Tak wygląda podejście Full Site Editing do umieszczenia krótkiego formularza w każdej stopce bez shortcode.

Dwie uwagi z pracy z klientami. Umieść formularz w grupie o maksymalnej szerokości około 640 pikseli, bo formularz rozciągnięty na 1200-pikselową kolumnę czyta się źle. Dodaj też jedną linię zwykłego tekstu nad formularzem z bezpośrednim adresem e-mail. Część odwiedzających nie skorzysta z formularza, a podanie adresu nic nie kosztuje.

Dlaczego e-mail z formularza kontaktowego nigdy nie dociera?

Dlatego, że WordPress wysyła pocztę przez domyślną funkcję PHP serwera, a serwery odbiorców jej nie ufają. Funkcja wp_mail(), opisana w dokumentacji deweloperskiej WordPressa, przekazuje wiadomość temu, co dostarcza serwer. Na hostingu współdzielonym jest to często nadawca bez uwierzytelnienia, który nie przechodzi kontroli SPF i DKIM. Gmail i Outlook wtedy przenoszą wiadomość do spamu albo ją odrzucają.

Podstęp polega na tym, że formularz i tak pokazuje zielony komunikat o sukcesie. Wtyczka wykonała swoją pracę, serwer przyjął wiadomość, ale do skrzynki nigdy nie dotarła.

Naprawa ma trzy części.

1. Zainstaluj wtyczkę SMTP, na przykład WP Mail SMTP, FluentSMTP albo Post SMTP, i połącz ją z usługą transakcyjnej poczty.

2. Ustaw adres „Od” w swojej domenie, na przykład hello@twojadomena.pl, nigdy darmowy adres Gmaila.

3. Dodaj rekordy SPF i DKIM, które podaje usługa pocztowa, do DNS domeny i opublikuj rekord DMARC, nawet w trybie samego monitorowania.

Która usługa? Przy kilku wiadomościach dziennie niemal każdy dostawca transakcyjny się sprawdzi. Postmark powstał właśnie do tego zadania i trzyma pocztę transakcyjną na osobnej infrastrukturze, oddzielonej od poczty marketingowej.

Jeśli klient później chce wysyłać newsletter, Brevo obsługuje pocztę transakcyjną i kampanie na jednym koncie, a darmowy pakiet w zupełności wystarcza małej stronie.

Warto też sprawdzić konfigurację samodzielnie. Po wysłaniu testowej wiadomości otwórz jej nagłówki i zobacz, czy odbiorca potwierdził SPF i DKIM, zanim zrobi to klient. Samouczek Mailtrap pokazuje tę samą konfigurację SMTP krok po kroku, jeśli chcesz drugiego źródła.

Jak ograniczyć spam bez irytowania prawdziwych odwiedzających?

Publiczny formularz przyciąga boty w ciągu kilku dni. Standardową odpowiedzią jest CAPTCHA, ale zwykle to zła pierwsza odpowiedź, bo każde wyzwanie kosztuje prawdziwe zgłoszenia.

Warstwy zabezpieczeń wdrażaj w tej kolejności i przerwij, gdy spam ustanie.

Zacznij od honeypota, czyli ukrytego pola, którego człowiek nigdy nie wypełni, a bot zawsze. Większość wtyczek ma je włączone domyślnie. Dodaj Akismeta, jeśli wtyczka go obsługuje. Gdy spam się utrzymuje, dołóż przyjazne prywatności wyzwanie, na przykład Cloudflare Turnstile, zanim sięgniesz po widoczną łamigłówkę z obrazkami. Klasyczne pole reCAPTCHA zostaw dla formularzy pod długotrwałym atakiem.

Jeśli to możliwe, ogranicz też liczbę zgłoszeń na poziomie serwera. Jedno IP wysyłające czterdzieści zgłoszeń na minutę nie jest odwiedzającym.

Po stronie prawnej, jeśli witryna obsługuje odbiorców z Unii Europejskiej, dodaj niezaznaczone pole zgody z linkiem do polityki prywatności i ustaw wtyczkę tak, by nie przechowywała wpisów dłużej, niż trzeba. Wiele wtyczek domyślnie trzyma każde zgłoszenie w bazie bez końca. Zmień to.

Jak przetestować formularz przed przekazaniem klientowi?

Testuj go jak obcy człowiek i testuj na żywej domenie, nie na stagingu. Staging często blokuje wychodzącą pocztę, więc wynik testu tam nic nie dowodzi.

Wyślij formularz z telefonu, na transmisji komórkowej, z adresem Gmail, a potem z adresem Outlook. Sprawdź skrzynkę i folder spamu odbiorcy. Otwórz nagłówki wiadomości i poszukaj spf=pass oraz dkim=pass. Wyślij raz z pustymi polami i raz z celowo błędnym adresem e-mail, by upewnić się, że komunikaty o błędach są jasne i czytelne dla czytnika ekranu.

Następnie wypełnij formularz tylko klawiaturą. Jeśli nie da się dotrzeć do przycisku wysyłania klawiszem Tab albo nie widać, które pole ma fokus, popraw style fokusu w motywie.

Warto też sprawdzić, czy nadawca dostaje potwierdzenie. Wiele wtyczek pozwala wysłać automatyczną odpowiedź do osoby, która napisała. Krótka wiadomość w rodzaju „Dziękujemy, odpowiemy w ciągu dwóch dni roboczych” zmniejsza niepewność i pokazuje, że zgłoszenie zostało zapisane. Sprawdź też, czy po kliknięciu „Odpowiedz” w skrzynce adres odbiorcy wskazuje nadawcę zgłoszenia, a nie adres techniczny strony, bo inaczej odpowiedź nigdy do niego nie dotrze.

Marginalia: prowadź dziennik. Dodaj wtyczkę albo funkcję usługi pocztowej, która zapisuje wysłane wiadomości, tak aby na skargę klienta „nie dostałem zapytania” odpowiedzieć w minutę, a nie w całe popołudnie.

Kiedy wtyczka formularza jest złym narzędziem?

Czasem formularz kontaktowy nie jest tym, czego potrzebuje odwiedzający. W sklepie widget wsparcia, który odczytuje dane zamówienia, pokona puste pole wiadomości. Na stronie pozyskiwania leadów formularz należy do większego przepływu ze śledzeniem.

Jeśli zgłoszenia mają trafiać do CRM albo arkusza, wyślij je tam bezpośrednio, zamiast ręcznie przepisywać e-maile. Wtyczka formularzy z połączeniem Zapier przekaże każdy wpis do Arkuszy Google, Slacka lub narzędzia do zarządzania projektami w kilka kliknięć.

Jeśli formularz jest drzwiami do lejka sprzedażowego, CRM z własnymi formularzami do osadzania usuwa wtyczkę ze stosu i trzyma historię kontaktów w jednym miejscu. Bezpłatne formularze HubSpot to typowy przykład.

Schemat jest wszędzie ten sam. Formularz to łatwe dziesięć minut. Dostarczanie, reguły spamu i obsługa zgłoszeń to właściwa praca. Otwórz dziś formularz kontaktowy własnej strony, wyślij sobie wiadomość z innego konta i sprawdź, ile czasu zajmie jej dotarcie.