Contact form 7 jest najpopularniejszą wtyczką do tworzenia formularzy kontaktowych w WordPressie. Ponad 5 milionów instalacji wtyczki mówi samo za siebie. Jednak dla osób zaczynających dopiero swoją przygodę z WordPressem, tworzenie formularzy może nie być intuicyjne. Podczas webinaru przeprowadzimy Cię przez konfigurację zarówno prostego formularza kontaktowego, jak i przyjrzymy się różnym addonom do wtyczki Contact Form 7, aby stworzyć bardziej zaawansowany formularz.

[00:05:48] Instalujemy wtyczkę Contact Form 7

W kokpicie WordPressa przechodzimy do Wtyczki -> Dodaj nową. W oknie wyszukiwania wpisujemy Contact Form 7 i instalujemy, a następnie aktywujemy wtyczkę. W menu pojawi nam się nowy element – Formularze.

instalacja wtyczki Contact Form 7 w kokpicie WordPressa

[00:07:30] Tworzymy pierwszy formularz kontaktowy w Contact Form 7

Podczas instalacji, wtyczka Contact Form 7, utworzy nam od razu przykładowy formularz kontaktowy. Możemy do niego przejść klikając w menu w Formularze -> Wszystkie formularze -> Formularz 1. Ukaże nam się okno edytora formularza. Podgląd front-endowy formularza nie jest niestety dostępny z tego poziomu, dlatego też w pierwszej kolejności warto jest wstawić formularz na jedną z podstron i zobaczyć, w podglądzie strony, jak ten formularz wygląda i jak działa.

[00:08:05] Publikujemy formularz kontaktowy na stronie

Skopiujmy najpierw shortcode przypisany do Formularza 1. A następnie utwórzmy nową stronę o nazwie Kontakt wybierając w menu Strony -> Dodaj nową. Wpisujemy tytuł Kontakt i korzystając z edytora blokowego, wybieramy blok Shortcode, do którego wstawiamy skopiowany wcześniej shortcode formularza. Publikujemy stronę i możemy podejrzeć formularz kontaktowy w przeglądarce.

wstawianie formularza kontaktowego na stronę

[00:09:22] Edytujemy pola formularza kontaktowego

Powróćmy do edytora formularza wybierając z menu Formularze -> Wszystkie formularze -> Formularz 1, zakładka Formularz. W naszym przykładowym formularzu zobaczymy, że pojedyncze pole formularza składa się z opisu pola oraz z shortcodu reprezentującego samo pole, do którego użytkownik może wpisać swoje dane. Shortcode, w minimalnej formie, składa się z nazwy typu pola oraz unikalnej nazwy pola, która jest potem wykorzystywana do przechowania treści wpisanej przez użytkownika w dane pole formularza.

Do wyboru mamy następujące pola formularza:

  • tekst [text nazwa-pola]
  • email [email nazwa-pola]
  • adres url [url nazwa-pola]
  • telefon [tel nazwa-pola]
  • liczba [number nazwa-pola]
  • data [date nazwa-pola]
  • pole tekstowe [textarea nazwa-pola]
  • menu rozwijane [select nazwa-pola]
  • pola wyboru [checkbox nazwa-pola]
  • pola jednokrotnego wyboru [radio nazwa-pola]
  • wyrażanie zgody [acceptance nazwa-pola]
  • quiz [quiz nazwa-pola]
  • plik [file nazwa-pola]
  • przycisk wysłania formularza [submit]

Dodatkowo do nazwy typu pola możemy dodać znak * aby oznaczyć dane pole jako wymagane (przykład: [text * nazwa-pola]).

Zacznijmy więc edytować przykładowy formularz. Możemy usunąć elementy, których nie potrzebujemy, a także dodać nowe pola.

Wyobraźmy sobie, że tworzymy formularz ofertowy. Utwórzmy więc pole, w którym użytkownik może wybrać budżet jakim dysponuje. Wstawiamy kursor w odpowiednim miejscu w kodzie formularza i klikamy na przycisk pola jednokrotnego wyboru. Pokaże nam się okno edycji pola. Warto zmienić nazwę pola na taką, która opisuje dane pole. W naszym przypadku wpiszemy Nazwę „budzet”.

Następnie, w polu Opcje, musimy podać wszystkie opcje, spośród których użytkownik bedzie mógł wybrać jedną. Każdą opcję wpisujemy w osobnym wierszu. W naszym przypadku wpiszemy następujące opcje budżetu: “do 2000 zł, “2000 zł do 5000 zł” i “powyżej 5000 zł”. Warto także zaznaczyć opcję “Dodaj do elementów klikalne opisy”. Dodatkowo, możemy wpisać nazwę atrybutu ID i klasy, jeśli potrzebujemy ostylować to pole formularza. Na końcu klikamy w przycisk Wstaw znacznik. W następnej kolejności, w tagu musimy także wpisać opis tego pola dla użytkownika, nad polem [radio …], wpisujemy więc „Budżet”.

Zapisujemy formularz, a następnie możemy podejrzeć go na stronie Kontakt. Widzimy, że nowe pole zostało dodane.

[00:26:22] Edytujemy ustawienia wysyłki formularza kontaktowego

Na stronie edycji formularza przechodzimy do zakładki Email. Możemy tu skonfigurować dane do wysyłki formularza.

Kolejne pola wypełniamy w następujący sposób:

  • Odbiorca – wpisujemy tu adres emaila, na który chcemy otrzymać wiadomość z wypełnionego formularza
  • Nadawca – tu uwaga! wpisujemy adres email w domenie naszej strony. Przykładowo jeśli nasza strona istnieje pod adresem adres.pl to powinniśmy wpisać tu adres email cos@adres.pl. Wpisywany tu adres email teoretycznie niekoniecznie musi istnieć, choć jego istnienie jest wymagane w niektórych firmach hostingowych. Dlatego też warto go utworzyć w panelu administracyjnym naszej domeny (w linuxpl.com znajduje się on pod adresem: https://linuxpl.com/logowanie-panel-admina/ w zakładce Konta pocztowe -> Stwórz nowe konto pocztowe).
  • Temat – jest to tytuł maila, który przyjdzie do nas po tym, jak ktoś wypełni formularz. Możemy tu wpisać dowolny tytuł np. “Zapytanie ofertowe”.
  • Dodatkowe nagłówki – tutaj koniecznie musimy wpisać: Reply-To: [shortcode pola email], nazwa shortcodu pola z mailem musi być zgodna z tą podaną przy tworzeniu tego pola formularza
  • Treść wiadomości – tutaj wpisujemy treść wiadomości, która przyjdzie do nas po tym jak ktoś wypełni formularz kontaktowy. Aby otrzymać informacje wpisane przez użytkownika musimy tutaj zamieścić shortcody poszczególnych pól formularza. Np. dla naszego pola z określeniem budżetu moglibyśmy tu wpisać – Budżet: [budzet].
  • Załączniki – jeśli w formularzu umożliwiamy dodanie załącznika to w tym miejscu wpisujemy shortcode tego pola.

W opcjach wysyłki mamy też Email (2), który umożliwia nam wysłanie drugiego maila do innej osoby. Często wykorzystuje się tą opcję do wysłania potwierdzenia użytkownikowi, który wypełnił formularz. Pola wypełniamy tu w podobny sposób jak w przypadku pierwszego maila, z tym, że w polu odbiorca wpisujemy shortcode pola emaila, a w polu Dodatkowe nagłówki Reply-to: nasz email.

konfiguracja formularza Contact Form 7

[00:34:36] Edytujemy komunikaty dotyczące wysyłki

W trzeciej zakładce, o nazwie Komunikaty, możemy edytować treści komunikatów, które wyświetlą się użytkownikowi po tym, jak wypełni formularz i kliknie w przycisk Wyślij. Komunikaty informują użytkownika o statusie wysyłki lub wskazują błędnie wypełnione pola.

Domyślne komunikaty są już utworzone i przetłumaczone na język polski, także właściwie nie musimy ich edytować. Możemy je edytować jeśli jest potrzeba przekazania użytkownikowi dodatkowej informacji. Np. do komunikatu, że wiadomość została wysłana moglibyśmy dodać, że odpowiemy na nią w ciągu 24 godzin.

[00:38:13] Zabezpieczamy formularz przed spamem

Prędzej czy później, poprzez formularz kontaktowy, zacznie przychodzić do nas spam. Niestety strony są ciągle atakowane przez boty hakujące czy spamujące i najlepiej jest od razu spróbować zabezpieczyć formularz przed spamem.

Mamy różne opcje zabezpieczenia formularza kontaktowego przed spamem. Przykładowo możemy:

  • wykorzystać pole quiz, w którym ustawimy proste pytanie np. ile to jest 2 + 2
  • wykorzystać reCAPTCHA od Google, jest to bardzo popularne rozwiązanie, więcej o podłączeniu reCAPTCHA do Contact Form 7 możemy przeczytać na stronie https://contactform7.com/recaptcha/
  • wykorzystać mechanizm honeypot, jest to bardzo prosta koncepcja, dodajemy do formularza ukryte pole, którego użytkownicy nie będą widzieć, ale boty spamujące tak. Gdy to ukryte pole zostanie wypełnione, formularz po prostu nie zostanie wysłany. Honeypot możemy zaimplementować za pomocą wtyczki Contact Form 7 Honeypot https://pl.wordpress.org/plugins/contact-form-7-honeypot/

[00:40:36] Dodajemy pola ładowane warunkowo

Za pomocą wtyczki Conditional Fields for Contact Form 7 możemy tworzyć pola, które będą widoczne wyłącznie wtedy, kiedy zostanie spełniony ustalony wcześniej warunek.

Przykładowo, dla naszego pola z budżetem, możemy utworzyć dodatkowe pola wyboru zakresu oferty, które będą ładowane warunkowo, w zależności od tego jakim budżetem dysponuje użytkownik.

  • Gdy użytkownik zaznaczy budżet do 2000 zł to będzie mieć do wyboru tylko stronę internetową.
  • Gdy zaznaczy opcję 2000 zł do 5000 zł to będzie mieć do wyboru 2 opcje: stronę internetową i optymalizację SEO.
  • Gdy zaznaczy budżet powyżej 5000 zł to będzie mógł wybrać stronę internetową, optymalizację SEO i fanpage FB.

Dzięki wtyczce Conditional Fields for Contact Form 7 możemy tworzyć bardzo zaawansowane, zagnieżdżone warunki dla pól formularza. Szczegóły konfiguracji można zobaczyć na nagraniu webinaru oraz na stronie https://conditional-fields-cf7.bdwm.be/conditional-fields-for-contact-form-7-tutorial/.

przykład działania wtyczki Conditional Fields for Contact Form 7

[00:49:05] Udostępniamy ebooka po wypełnieniu formularza

Częstym scenariuszem spotykanym na blogach i stronach firmowych jest udostępnianie ebooka jako zachęty do zapisania się na newsletter czy wypełnienia formularza. I taki prosty system udostępniania ebooka możemy w prosty sposób stworzyć za pomocą wtyczki Contact Form 7.

W pierwszej kolejności utwórzmy nową stronę o tytule np. Ebook, umieśćmy na niej link do pobrania ebooka, a następnie zabezpieczmy stronę hasłem. Możemy to zrobić w sekcji Wyświetlanie, która w nowym edytorze blokowym znajduje się w zakładce Dokument, z prawej strony edytora. W sekcji Dostępność wpisu wybieramy Zabezpieczony hasłem, wpisujemy wybrane hasło, które ma chronić tą podstronę i zapisujemy stronę.

Następnie musimy wrócić do edycji naszego formularza i w zakładce Email zaznaczamy opcję Użyj Emaila (2). Aby email został wysłany do użytkownika, musimy w polu Odbiorca wpisać shortcode z nazwą pola email, w którego miejsce podstawi się faktyczny email użytkownika. W sekcji Treść wiadomości możemy wtedy wpisać URL strony, na której znajduje się ebook i hasło, po wpisaniu którego użytkownik uzyska dostęp do ebooka.

Taki sposób udostępniania plików należy stosować wyłącznie w sytuacjach, gdy nie zależy nam na tym, że do pliku można uzyskać dostęp bez podania hasła (jeśli ktoś będzie znał bezpośrednią ścieżkę do pliku to może ominąć stronę zabezpieczoną hasłem). Sprawdzi się to w sytuacji gdy chcemy szybko uruchomić system pobierania ebooka, gdy ma on być wyłącznie zachętą do wypełnienia formularza i nie posiada wrażliwych danych.

[00:54:46] Zapisujemy dane z formularza w bazie danych

Mamy też możliwość zapisywania danych, wysłanych przez użytkownika poprzez formularz kontaktowym, do bazy danych. Może to być przydatne np. gdy formularz służy do zapisów na wydarzenie, a my chcemy mieć możliwość łatwego pobierania pliku CSV z listą zapisanych osób.

W repozytorium WordPressa dostępnych jest kilka wtyczek rozszerzających Contact Form 7 o funkcjonalność zapisu do bazy danych. Najprostszą w konfiguracji jest wtyczka Advanced Contact form 7 DB, gdyż właściwie nie wymaga konfiguracji. Wystarczy ją włączyć, a sama będzie zapisywać dane z formularza do bazy.

Inne wtyczki to:

Contact Form 7 – podsumowanie

Wtyczka Contact Form 7, wraz z kilkudziesięcioma dostępnymi do niej addonami, daje nam potężne możliwości tworzenia nawet najbardziej zaawansowanych formularzy. Warto się z nią zapoznać, nawet jeśli do tej pory korzystaliśmy wyłącznie z wtyczek z wizualnym kreatorem formularza kontaktowego jak np. Ninja forms czy Contact Form by WPForms.

Odpowiedz

Adres email nie będzie opublikowany.

*