Reklama sponsora

Formularz kontaktowy – Contact Form 7



Formularz kontaktowy

Formularz kontaktowy najlepiej tworzy się przy pomocy wtyczki „Contact Form 7”. Jest to bez wątpienia najpopularniejsza wtyczka wykorzystywana do tego celu, powinna gościć i zapewne gości w standardzie większości twórców stron internetowych opartych o cms WordPress. Wtyczka już dawno ma ponad milion aktywnych instalacji a jej ocena to cztery i pół gwiazdki z ponad tysiąca ocen. Warto zwrócić uwagę także na fakt posiadania zaczepów i filtrów dzięki czemu mamy znaczne możliwości dostosowania wtyczki do własnych potrzeb. Różne modyfikacje opiszę w kolejnych artykułach związanych z tą wtyczką.

Instalacja i konfiguracja wtyczki

Instalacja wtyczki to standard. Wchodzimy we wtyczki > dodaj nową, wyszukujemy wtyczkę „Contact Form 7” i klikamy zainstaluj.  na tym etapie możemy zobaczyć jak wiele jest wtyczek rozszerzających funkcjonalności CF7. Po aktywacji wtyczki (kliknij „włącz”) powinna się ukazać dodatkowa pozycja w menu o nazwie „Formularze”.

Contact form 7 - menu

Contact form 7 – menu

Dodawanie formularza

Mamy tutaj kilka dostępnych opcji, takich jak lista dostępnych formularzy, możliwość dodania nowego oraz Integracje (chodzi tutaj o możliwość zintegrowania formularza kontaktowego z zabezpieczeniem reCaptcha). Ogólnie zaraz po instalacji jest dostępny jeden formularz przykładowy ale zaczniemy od dodania nowego formularza. W tym celu wybieramy „Dodaj nowy” i ukazuje się formularz kontaktowy z domyślnymi ustawieniami jak na obrazie poniżej.

Contact form 7 - dodawanie formularza

Contact form 7 – dodawanie formularza

Po pierwsze należy wprowadzić tytuł formularza w tym przypadku będzie to „Formularz pierwszy”. Dalej mamy kilka zakładek, pierwsza z nich to „Formularz”. Jest to pole, w którym wprowadzamy kod html formularza oraz shortcode poszczególnych pól jakie mają się wyświetlić użytkownikowi. Warto zwrócić uwagę że shortcode składają się głównie z typu pola, gwiazdki, która oznacza czy pole jest wymagane oraz nazwę tego pola.

Warto także zwrócić uwagę na to że nad tym dużym polem tekstowym jest lista przycisków dzięki którym można w prostszy sposób dodać własne pole. Dla przykładu dodamy pole obowiązkowe z numerem telefonu. Najpierw wstawiamy kod html odpowiedni za nazwę pola wyświetlaną w formularzu dla użytkownika, w tym przypadku wstawiamy znaczniki html „label” najpierw wpisujemy „Numer telefonu (wymagane) a następnie dodajemy pole. Jak widać jest nawet odpowiedni przycisk z napisem „telefon”  klikamy go. W tym momencie ukazuje się dodatkowy formularz kreatora pola.

Tutaj sprawa jest dość prosta. Jeśli chcemy aby pole było wymagane (czyli użytkownik musi zaznaczyć aby wysłać formularz) zaznaczamy checkbox. Dalej podajemy nazwę pola. Trzeba będzie ją zapamiętać aby później dodać informacje do treści e-maila, możemy także wprowadzić domyślną wartość. Jeśli chcemy uzyskać efekt placeholder czyli tekst który zniknie, kiedy użytkownik zacznie wpisywać cokolwiek zaznaczamy checkbox. W tym polu można na przykład napisać „podaj swój nr telefonu” i zaznaczyć checkbox poniżej.

Dalej jest pole atrybut id, najczęściej jest przydatny jeśli działamy coś ze skryptami JavaScript. Często jeśli tworzymy stronę wpisujemy atrybut klasy. Czyli jeśli większość szablonów stoi na BootStrapie przeważnie wpisuje się tutaj control-form.

Pod spodem jest kod generowanego szhortcode. Na koniec klikamy wstaw znacznik i powinien zostać wstawiony w odpowiednie miejsce.

Na tym etapie powinniśmy otrzymać efekt jak na obrazku poniżej:

Contact form 7 - wlasne pole

Contact form 7 – wlasne pole

Konfiguracja e-maila

Teraz przechodzimy do kolejnej zakładki „Email” są tam już przykładowe ustawienia, ale dodaliśmy nowe pole z numerem telefonu tak więc teraz trzeba je dodać także w wysyłanej wiadomości email z formularza kontaktowego.

Tutaj wykorzystujemy wcześniej podaną nazwę pola, podobnie jak na obrazie poniżej.

Contact form 7 - ustawienia maila

Contact form 7 – ustawienia maila

Warto tutaj także zwrócić uwagę na to że w tym miejscu ustawiamy adres e-mail nadawcy i odbiorcy. Zazwyczaj odbiorca to właściciel strony, automatycznie jest tutaj podstawiona wartość administratora podana przy instalacji. Jest też pole załączniki, które funkcjonuje podobnie jak pole treść wiadomości z tym że tutaj wstawiamy pola z plikami.

Komunikaty

Jest jeszcze zakładka komunikaty, ale tutaj chyba nie muszę za wiele tłumaczyć, po prostu można tutaj zmieniać którąkolwiek z wiadomości wyświetlanych użytkownikowi.

Jest też zakładka „ustawienia dodatkowe”, która jest raczej rzadziej wykorzystywana i dla bardziej zaawansowanych zastosowań, być może opiszę ją kiedyś w przyszłości.

Dodawanie formularza kontaktowego contact form 7 na stronie

Już mamy z grubsza skonfigurowany formularz kontaktowy, teraz pozostaje tylko dodać go w odpowiednim miejscu na stronie. Na początek klikamy „zapisz”. W ten sposób uzyskaliśmy specjalny kod formularza, zaznaczony na obrazie poniżej.

Contact form 7 - shortcode

Contact form 7 – shortcode

Kopiujemy ten kod i możemy teraz umieścić go co najmniej w dwóch miejscach, albo w widgecie albo na nowej podstronie. Teraz mam świeżo zainstalowanego wordpressa (ustawienia domyślne na start w wordpress 4.9) i utworzę sobie stronę z formularzem kontaktowym.

W menu bocznym kokpitu wchodzę w Strony -> Dodaj nową, jako tytuł wpisuję „Kontakt” i wklejam kod formularza uzyskany wcześniej.

Contact form 7 - strona kontaktu

Contact form 7 – strona kontaktu

Klikam opublikuj i mam stronę kontaktu, teraz przechodzę do wygląd -> menu aby dodać stronę do jakiegokolwiek menu. Jako że mam świeżą instalację WP na standardowym szablonie nie mam jeszcze utworzonego żadnego menu, ale to nie problem. Wprowadzam nazwę menu („main menu” tym razem) i klikam „utwórz menu”. Teraz jestem w edycji menu, dodaję moją nowo utworzoną stronę do menu i zapisuję tak jak na obrazku poniżej:

Contact form 7 - dodawanie do menu

Contact form 7 – dodawanie do menu

Jeśli jesteśmy w standardowej instalacji tak jak ja, na stronie głównej powinien się pojawić odnośnik do naszej strony z kontaktem.

Contact form 7 - dodawanie do menu

Contact form 7 – dodawanie do menu

Po wejściu w odnośnik zostajemy przeniesieni na stronę z formularzem kontaktowym jeśli wszystko jest poprawnie zrobione to po wprowadzeniu informacji i wysłaniu formularz powinien się wyczyścić a pod spodem ukazać komunikat o poprawnym wysłaniu wiadomości jak poniżej.

Contact form 7 - formularz po wysłaniu

Contact form 7 – formularz po wysłaniu

No i gotowe, mamy na stronie w pełni funkcjonalny formularz kontaktowy. Przykładowa wiadomość wysłana z formularz w Thunderbird (program do poczty) wygląda jak na obrazku poniżej.

Contact form 7 - email

Contact form 7 – email

Teraz przydało by się jeszcze zabezpieczyć ten formularz w jakiś sposób przed spamem. W standardzie jest teraz google reCaptcha ale o tym już w kolejnej części.

 


Dodaj komentarz

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