MODUŁ 0 - Przygotowanie do startu! 3... 2... 1...
MODUŁ 1 – Czy WordPress jest w ogóle dla mnie?
MODUŁ 2 - MYŚLENIE, czyli szykujemy się do starcia! ;)
MODUŁ 3 – Ogarniamy DZIAŁKĘ i tabliczkę z adresem
MODUŁ 4 – Działka jest. Czas na DOM, drzewo i…
MODUŁ 5 – Dodajemy TREŚCI, czyli niech wreszcie coś zacznie się dziać
MODUŁ 6 - BACKUPUJEMY, ZANIM ZEZPSUJEMY ;)
MODUŁ 7 - MOTYWY, CZYLI PEŁEN MAKE-UP DLA STRONY
MODUŁ 8 - WTYCZKI, CZYLI CO JESZCZE MOŻEMY ODPICOWAĆ

8.10. Przydatne wtyczki – formularz kontaktowy

wordpress formularz kontaktowy

Przyznam uczciwie, że nie jestem wielką fanką formularzy kontaktowych, ale wiem, że Wy na nie czekacie, wiec nie będę taka i pokażę Wam, co i jak, ażebyście sobie mogli uczynić ich na stronie ile dusza zapragnie 🙂

Sama miejsce na formularz mam już na stronie Kontakt zarezerwowane 😁

WordPress: formularz kontaktowy: miejsce na formularz kontaktowy na stronie internetowej

Wtyczka do formularza kontaktowego – WPForms

Wtyczką potężną, bardzo dobrą i często używaną do tworzenia formularzy kontaktowych na stronie jest Contact Form 7. Być może już mieliście z nią przyjemność, bo często jest preinstalowana w bardziej zaawansowanych motywach. Natomiast nie jest to moim zdaniem wtyczka najłatwiejsza i najbardziej intuicyjna w używaniu dla osób początkujących, dlatego wspominam o niej (że jeśli macie i kumacie to git, nie trzeba wywalać), ale zostawiam na boku 🙂

Wtyczką, którą my wesprzemy się, żeby stworzyć prosty formularz kontaktowy, jest WPForms:

👉 https://wordpress.org/plugins/wpforms-lite/

Można ją wyszukać w repozytorium, a potem zainstalować i włączyć:

WordPress: formularz kontaktowy: wtyczka WPForms

Po włączeniu wskakujemy w kokpicie do zakładki WPForms i tam do All forms, czyli Wszystkie formularze. Dość przewidywalnie – nie będzie tam żadnego, no bo i skąd miałby się wziąć, dlatego dodajemy nowy, klikając Add new (można też zamiast tego kliknąć na dole przycisk Create Your Form – to bez różnicy, bo efekt będzie identyczny):

WordPress: formularz kontaktowy - dodawanie pierwszego formularza kontaktowego

Wylądujemy na stronie, gdzie w polu Name Your Form (Nazwij swój formularz) wpisujemy… nazwę formularza (same zaskoczenia dziś znienacka ;)), a potem poniżej możemy się wesprzeć w radosnej twórczości, opierając ją na jednym z wieeeeelu gotowych, wstępnie poustawianych szablonów, które oferuje nam wtyczka.

Ja wybieram Simple Contact Form, czyli Prosty Formularz kontaktowy, bo właśnie to jest dokładnie to, czego potrzebuję. Klikam Use Template, czyli Użyj szablonu:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego z szablonu

Na ekranie pokaże się podgląd formularza, który się z tego szablonu rodzi:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego z szablonu prostego

Trzeba będzie nad nim ciutkę popracować, żeby mówił do naszych czytelników po polsku, ale zajmie to dosłownie parę minut w maksie.

Klikam na pierwsze pole, czyli tam, gdzie było Name, i po lewej stronie otworzą się opcję edycji. Mogę tu w polu Label (Etykieta) zamiast angielskiego wpisać polskie Imię i nazwisko:

WordPress: formularz kontaktowy - pola na imię i nazwisko

Potem w podzakładce Advanced zmieniam sobie jeszcze dwa drobiazgi:

  • w opcji Field Size, czyli Rozmiar pola, wybieram Large, czyli Duże, żeby dwa pola na imię i nazwisko zajmowały całą szerokość sekcji, tak jak miejsce na treść wiadomości (to nie mus, ale ja lubię jak jest równo :))
  • przesuwam suwaczek przy Hide Sublabels, żeby zniknęły mi małe etykietki First i Last pod polami:
WordPress: formularz kontaktowy - dodawanie formularza kontaktowego: zmiana pola na imię i nazwisko

Te same akcje tłumaczeniowo-ustawieniowe robię dla pola z e-mailem oraz treścią wiadomości, zatwierdzam zmiany pomarańczowym przyciskiem Save (Zapisz) w prawym górnym rogu i już polskość formularza mamy częściowo odfajkowaną 🙂

Dalej przechodzę w opcjach wtyczki do części Settings, czyli Ustawienia. Tu wybieram sekcję General, czyli Ogólne i w zasadzie interesować będą mnie tylko dwa pola:

  • w Submit Button Text wpisuję po polsku tekst, który ma być na przycisku wysyłania,
  • w Submit Button Processing Text wpisuję tekst, który ma się pojawiać przez krótki moment wysyłania wiadomości:
WordPress: formularz kontaktowy - dodawanie formularza kontaktowego: tłumaczenie przycisku Wyślij

Idę dalej do sekcji walczenia ze spamem (Spam Protection and Security). Tu upewniam się, że prztyczek-elektryczek pod nazwą Enable anti-spam protection jest włączony (powinien być domyślnie, ale warto sprawdzić).

Tu dotykamy niestety powoli przykrego tematu spamu z formularzy kontaktowych, który jest obecnie normą i bardzo trudno z tym walczyć, bo to prawdziwy wyścig zbrojeń.

To rozwiązanie wbudowane w WPForms to taki prosty honeypot, czyli pułapka na boty. Ukryte pole, którego ludzie nie widzą, bo jest poza ekranem, ale boty tak, bo nie czytają z ekranu, tylko z kodu. Po tym w teorii można rozpoznać bota od ludzia – ludź tego pola nie wypełni, bo go nie widzi, a bot tak. Więc jeśli jest wypełnione – formularz nie jest wysyłany.

Tyle w teorii, bo oczywiście boty też już głupie nie są i z czasem się uczą.

Jeśli okaże się, że to zabezpieczenie jest niewystarczające i spamu dostajemy na tony, że nie nastarczamy łopatować, warto będzie rozważyć instalację jakiejś captchy (np. reCaptchy czy hCaptchy), która może mocniej pomóc – wtedy to także robimy w tym miejscu 🙂

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego: zabezpieczenie przeciw spamowi

Dalej wskakujemy w Notifications, czyli powiadomienia.

Tu upewniamy się, że mamy włączone powiadomienia suwaczkiem przy Enable Notofications, po czym uzupełniamy sobie po polsku:

  • Email Subject Line – to będzie tytuł wiadomości, którą ktoś nam wyśle za pomocą formularze
  • From Name – to będzie nazwa nadawcy tej wiadomości

Reszta pól powinna być z automaty uzupełniona dobrze i zwykle nie ma powodu, żeby tam gmerać 🙂

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego: ustawienie powiadomień

Zostaje jeszcze Confirmations, czyli Potwierdzenia.

A raczej jedno potwierdzenie – to, które pokaże się czytelnikowi po wysłaniu wiadomości. Jego treść wpisujemy w pole Confirmation Message:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego: ustawienie potwierdzenia wysłania formularza

Po przeleceniu się przez ten tor przeszkód i zapisaniu zmian, w miejscu na wszystkie formularze, gdzie dotąd nie było żadnego, pojawi się ten oto nasz pierwszy, w pocie czoła wypracowany (no może z tym potem czoła to trochę przesadzam, bo jakoś dużo się nie narobiliśmy, ale uczcić lampką wina można, kto nam zabroni ;)):

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego: gotowy formularz

To teraz pozostaje wrzucić go na stronę.

Wchodzę na przygotowaną podstronę kontaktową i w miejscu, w którym zaplanowałam sobie formularz, dodaję nowy blok Gutenberga:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego na stronę

Wyszukuję blok WPForms, który pojawił się wśród bloków wraz z instalacją wtyczki, i wybieram go:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego na stronę - blok Gutenberga

W miejscu na formularz pojawi się misio, a na rozwijanej liście – formularze do wyboru.

W naszym przypadku jeden formularz, no bo tylko jeden dotąd uczyniliśmy. Zatem klikam Formularz kontaktowy:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego na stronę - blok Gutenberg

I już na podstronę wskakuje formularz:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego na stronę - blokiem Gutenberga

Od strony kokpitu będzie wyglądał trochę marnie, ale już na prawdziwej stronie, od frontu, z dużym prawdopodobieństwem (nie w każdym przypadku, ale najczęściej) przejmie styl strony (kolorki, ustawionka guzików) i będzie się prezentował znacznie lepiej:

WordPress: formularz kontaktowy - dodawanie formularza kontaktowego na stronę kontaktową

Ta-dam!

Formularz gotowy, można przetestować, wysyłając sobie próbną wiadomość 🙂

Powinna dojść elegancko i prezentować się tak:

WordPress: formularz kontaktowy - przykładowy e-mail z formularza kontaktowego

I co? to wszystko?

No właśnie jeszcze nie 🙂

Jest jeszcze taka rzecz, którą niekoniecznie na pierwszy rzut oka widać, ale warto oporządzić. Jest nią walidacja, co może strasznie brzmieć, ale jest proste – chodzi po prostu o sprawdzanie poprawności tego, co ktoś w formularz wrzuca.

WPForms taką walidację przeprowadza i komunikuje, jeśli coś pójdzie nie tak, na przykład użytkownik pospieszy się i kliknie Wyślij zanim wypełni wszystkie wymagane pola. Dostanie wtedy morze czerwonych komunikatów… po angielsku:

WordPress: formularz kontaktowy - tłumaczenie komunikatów (walidacja)

Żeby zmienić je na polskie, trzeba wejść w kokpicie w ustawienia wtyczki, czyli w zakładkę WPForms -> Settings, a potem w część pod tytułem Validation. Tam znajdziemy miejsce na przetłumaczenie sobie wszystkich możliwych komunikatów:

WordPress: formularz kontaktowy - tłumaczenie komunikatów

Po przetłumaczeniu na polski zapisujemy zmiany przyciskiem na samym dole i już teraz formularz będzie gadał do naszych czytelników po piękną polszczyzną 😉

I co? Teraz już wszystko?

No nie… Jednak NADAL nie 😂

RODO-srodo 🤯

Jesteśmy w niewoli durnych przepisów, więc oczywiście to nie może być koniec 😀

Musimy jeszcze odebrać od użytkownika zgodę na przetwarzanie jego drogocennych danych osobowych na potrzeby odpisania na jego e-mail, bo inaczej to w teorii nie będziemy mu mogli odpowiedzieć.

Osobiste moje zdanie jest takie, że to jest straszny cyrk, tylko że nawet małpy się już nie śmieją, ale przepisy to przepisy i zakładam, że nie będziecie chcieli ich ignorować.

Dlatego znów wskakujemy do zakładki Settings, czyli do ustawień, tam na głównym ekranie, nisko na dole, odnajdujemy sekcję GDPR i zaznaczamy ptaszka przy Check this option to enable GDPR related features and enhancements (i oczywiście zapisujemy zmiany przyciskiem Save Settings na dole):

WordPress: formularz kontaktowy - zgodność z RODO

Dzięki temu teraz, jeśli wejdziemy znów we wszystkie formularze, a tam klikniemy Edit (czyli Edytuj) przy formularzu kontaktowym:

WordPress: formularz kontaktowy - edytowanie formularza dla zgodności z RODO

w polach formularza do wyboru znajdziemy dodatkowe: GDPR Agreement, czyli Zgoda RODO.

Klikamy i miejsce, w którym użytkownik musi wyrazić zgodę na przetwarzanie danych, żeby wysłać formularz, wskoczy samo powyżej przycisku Wyślij:

WordPress: formularz kontaktowy - dodawanie zgody na przetwarzanie danych osobowych

Oczywiście możemy na tę zgodę kliknąć, aby ją przetłumaczyć na polski:

WordPress: formularz kontaktowy - tłumaczenie zgody na przetwarzanie danych osobowych

I teraz, po zapisaniu zmian, to już można śmiało powiedzieć, że gotowe 🙂

A ciastka?

Kto się mocno przejął ciastkową lekcją, pewnie zapyta teraz, czy w związku z instalacją WPForms trzeba dopisywać jakieś ciasteczka do cookiesowej wtyczki.

Odpowiedź jest dobra i zła zarazem 🙂

Jeśli robiliście taki prosty formularz jak ja, to nie. Żadne nowe ciastka nie będą się w związku z nim zapisywać (sprawdziłam 😊).

Uff!

Ale! (zawsze musi być jakieś ale 😭/😂)

Jeśli będziecie robić bardziej wypasiony formularz i z czymś te WPFormsy integrować (z programem do e-mail marketingu, z captchą czy co tam jeszcze się da z tą wtyczką ożenić), to już dodatkowe ciastka mogą się pojawić i wtedy trzeba pytać support/sprawdzać 🤯

To taka potencjalna łyżeczka dziegciu w beczułce miodku 😉

Tymczasem galopujmy ku kolejnej lekcji – będą mapki, więc zrobi się prawie jakby wakacyjnie! 🦄

Masz pytanie do tej lekcji? Kliknij tutaj, aby je zadać :)

Napisz pytanie lub komentarz:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Przewiń do góry