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: 鈥渄o 2000 z艂, 鈥2000 z艂 do 5000 z艂鈥 i 鈥減owy偶ej 5000 z艂鈥. Warto tak偶e zaznaczy膰 opcj臋 鈥淒odaj 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. 鈥淶apytanie 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.

*