Przestań martwić się o swoją stronę!
formularz kontaktowy w WordPressie

Idealny formularz kontaktowy w WordPressie – ContactForm 7

Jednym z najdziwniejszych miejsc, z którym się kiedyś kontaktowałam było Wydawnictwo Pallotinum. Byłam wtedy młodą “oazowiczką” i często jeździłam na różne spotkania z oazą związane. Na tych spotkaniach potrzebne nam było Pismo św., więc rad nie rad – trzeba je było wpakować do plecaka. W domu wprawdzie mieliśmy Biblię Tysiąclecia, ale – kto używał jej w latach 90-tych, ten wie, jakim była ciężkim klocem! Pamiętam, że bardzo zależało mi wtedy na znalezieniu jej mniejszego wydania, niestety nie było ono dostępne na rynku. Któregoś dnia, chyba pół żartem pół serio, ktoś podrzucił mi pomysł, by w tej sprawie napisać do wydawnictwa. Znalazłam więc w mojej Biblii adres i napisałam. List! Innej możliwości kontaktu za bardzo nie było… Jakież ogromne było moje zdziwienie, kiedy gdzieś po dwóch miesiącach otrzymałam od wydawnictwa odpowiedź!

Dziś kontakt mamy praktycznie z każdym. Podobno każdego z nas dzieli pięć osób do każdej innej, nieznanej nam, a wybranej przez nas osoby na świecie. Drogę tę skraca oczywiście również Internet, strony www i podane na nich opcje kontaktu. Jedną z nich jest formularz kontaktowy. Jestem przekonana, że każdy z nas domyślnie spodziewa się go w zakładce “Kontakt” i kiedy do niej zaglądamy – tam właśnie go znajdujemy. Ja na palcach jednej ręki mogę policzyć sytuacje, kiedy przeglądając strony, czy oferty, odwiedzam tę zakładkę i formularza nie znajduję.

Jak dodać formularz kontaktowy w WordPressie?

Jak na razie opisałam dwie wtyczki, dzięki którym stworzysz formularze kontaktowe w WordPressie: Ultimate Form Builder Lite, dzięki któremu w prosty sposób stworzysz formularz i Ninja Forms – wtyczkę, którą również skonfigurujesz w prosty sposób, ale która daje o wiele więcej możliwości przy tworzeniu samego formularza.Dziś postanowiłam opisać inną, najbardziej popularną i chyba najbardziej rozbudowaną wtyczkę do tworzenia formularzy kontaktowych – Contact Form 7.

To nie jest najbardziej intuicyjna wtyczka…

…w tym sensie, że tworząc w niej formularz kontaktowy nie masz bezpośredniego podglądu, jak będzie on wyglądał. Natomiast jest to wtyczka, dzięki której w formularzu kontaktowym stworzysz wszystko, dosłownie wszystko, co tylko dusza zapragnie. Co ważne – zwłaszcza dla początkujących – pierwszy, najbardziej podstawowy formularz mamy już dostępny od razu po włączeniu wtyczki. Żeby go użyć wystarczy skopiować shortcode oraz ustawić adres mailowy, na który będziesz otrzymywać powiadomienia o wysłaniu formularza ze strony.

Tu wpisz adres mailowy. Ważne – musi on mieć być w domenie strony (np. kontakt@twojadomena.pl).

contact form 7

 

Aby wstawić formularz na stronie – skopiuj shortcode i wklej w odpowiednie miejsce.

contact form 7

 

Jeśli jednak chcesz swój własny formularz

Wtedy masz dwie możliwości: możesz wyedytować istniejący formularz domyślny lub stworzyć swój nowy. Klikasz więc Edytuj lub Utwórz nowy. Po przejściu do edycji zobaczysz 4 zakładki.

Ustawienia pól formularza – tu dodasz nowe pola, wyedytujesz, usuniesz lub zmienisz ustawienia w istniejących.

contact form 7

 

Ustawienia adresów email – tu ustawisz, na jaki adres ma przychodzić wypełniony przez kogoś formularz i jakie informacje będą widoczne na liście maili w twojej skrzynce odbiorczej.

contact form 7

 

Ustawienia poleceń, z których formularz korzysta – tu przetłumaczysz polecenia i informacje, jakie są wyświetlane podczas wypełniania formularza, czy po jego wysłaniu.

contact form 7

 

Kody dodatkowe – to miejsce na wklejenie dodatkowych snippetów kodu.

contact form 7

 

Zmiana domyślnego formularza na inny

Generalnie do zrozumienia działania wtyczki ważne jest wiedzieć, że jej pola wstawiamy za pomocą kodów, na których ta wtyczka bazuje. Szczęśliwie się składa, że są one już na liście do wyboru i wybieramy je klikając w przycisk. Każdy z nich ma swoje ustawienia – zobaczysz je w otwartym oknie po wyborze. Dokładnie tagi opisane są oczywiście w dokumentacji wtyczki.

contact form 7

 

Dodatki w formularzu kontaktowym

Wstawiając formularz na swoją stronę trzeba pamiętać o dwóch rzeczach. Po pierwsze – mamy RODO (tu więcej o tym, dlaczego cokolwiek o RODO warto wiedzieć), więc w formularzu kontaktowym trzeba umieścić dodatkowy checkbox ze zgodą na przetwarzanie danych osobowych. Możesz do tego wykorzystać tag pola wyboru (checkboxes). Oczywiście pamiętaj, by kursorem ustawić się w miejscu, w którym chcesz umieścić checkbox.

checkbox contact form7

 

Po kliknięciu w pola wyboru otworzy ci się okno ustawień tego taga.

checkbox contact form7

 

Możesz zdecydować, czy ma to być pole wymagane (formularz nie zostanie wysłany, jeśli ktoś nie zaznaczy checkboxa). Natomiast jeśli ma to być zwykły checkbox do wyrażenia zgody – pozostałe ustawienia pozostaw domyślne. Wstawiony chceckbox w formularzu w edycji będzie wyglądał tak.

checkbox contact form7

 

Treść, która ma się pojawić przy twoim checkboxie wpisz po prostu obok taga. Gotowy formularz z checkboxem zgody może wyglądać tak:

checkbox contact form7

 

I po drugie – zabezpieczenie antyspamowe. Tak to niestety działa, że jeśli o nim nie pomyślisz, szybko przekonasz się ile spamu trafi na twoją skrzynkę mailową. Tak, roboty potrafią już wypełniać proste formularze kontaktowe! Najlepszym zabezpieczeniem do tego jest reCaptcha. Jak użyć?

Najpierw musisz zarejestrować się na stronie reCaptcha Google. Następnie wypełnić krótki formularz.

recaptcha contact form 7

 

W kolejnym kroku otrzymasz Site key i Secret key. Nie zamykaj strony – będą ci one potrzebne.

recaptcha contact form 7

Następnie przejdź do kokpit -> formularze -> integracje i po kliknięciu setup integration w reCaptcha wklej klucze pobrane ze strony Google.

recaptcha contact form 7

 

 

recaptcha contact form 7

I już. Od nowej wersji reCaptcha v.3 nie musisz robić nic więcej. Twoje formularze na stronie będą chronione dzięki samej integracji.

“Wodotryski” formularzowe

Na koniec kilka ciekawostek. Bo do swojego formularza możesz dodać wiele ciekawych pól:

[su_list icon=”icon: wordpress” icon_color=”#006f9a”]

  • pole text – dodaje możliwość przesłania krótkiej wiadomości,
  • pole email – daje możliwość przesłania adresu email i będzie weryfikować jego poprawne wpisanie,
  • pole adres URL – dzięki niemu ktoś może przesłać ci link w formularzu i znów formularz sprawdzi jego poprawność,
  • pole telefon – umożliwia przesłanie numeru telefonu i również sprawdza jego poprawność,
  • pole liczba – dodaje możliwość przesłania liczby i ustawienia rzędu jej wielości,
  • pole data – wstawia w formularzu możliwość wyboru daty z kalendarza, również możesz ustawić możliwe zakresy dat,
  • pole tekstowe – umożliwia przesłanie dłuższej wiadomości,
  • menu rozwijane – wstawia do formularza menu, z którego można wybrać konkretną opcję,
  • pola wyboru – daje możliwość wstawienia jednego lub więcej pól wyboru opcji,
  • pola jednokrotnego wyboru – wstawia pola jednokrotnego wyboru,
  • wyrażanie zgody – dodaje chceckbox z wyrażeniem zgody (powyżej opisałam, jak wstawić go polem wyboru),
  • pole quiz – pozwala utworzyć prosty quiz w formularzu,
  • pole plik – pozwala przesłać plik razem z formularzem kontaktowym.

[/su_list]

 

 

baner postawienia kawy w podziękowaniu

O autorce...

Kasia Aleszczyk

Znana jestem z tego, że pomagam innym zaprzyjaźniać się z WordPressem. Na co dzień uczę również, jak żyć w necie, by przeżyć. Cieszę się, że jesteś i zapraszam częściej!

37 thoughts on “Idealny formularz kontaktowy w WordPressie – ContactForm 7

  1. Nie znam lepszego rozwiązania odnośnie budowania formularza kontaktowego dla WP. Sam go też stosuję i jestem bardzo zadowolony. Jeszcze nigdy mnie nie zawiódł. Szkoda, że nie o każdej wtyczce WP mogę tak powiedzieć 🙂

  2. Mam pytanko, czy w Contact Form jest potrzebny checkbox “wyrażam zgodę na przetwarzanie danych os.”, żeby było na legalu? I kto tak właściwie gromadzi i przetwarza te dane? Ja? Contact Form? Czy właściciel serwera pocztowego?

    1. Hej Łukasz. Ty je gromadzisz i Twój hosting, z którym masz umowę powierzenia danych osobowych 🙂

    1. Hej, bo to wklejasz tam, gdzie chcesz umieścić formularz 🙂 np w widget HTML lub we wpisie, ale w trybie tekstowym.

  3. Dziękuję za wpis Kasiu, jestem na początku swojej pracy z WordPress i jest dla mnie bardzo pomocny 🙂

    Mam aktualnie problem z buttonem ‘Wyślij’. Za każdym razem wyświetla się jako ‘undefined Wyślij’. Adres e-mail, w polu ‘odbiorca’ to na razie mój mail prywatny, czy to może być przyczyną? Spróbowałam wstawić zupełnie nowy formularz, zupełnie bez edycji i jest taki sam błąd, więc to raczej nie problem znaczników itp.

    Będę wdzięczna za wskazówki 🙂

    Pozdrawiam

  4. mam problem z tym formularzem podczas ładowania zdjęć. gdy korzystam z formularza na laptopie to zdjęcia ładują się bez problemu natomiast z komórki wyskakuje komunikat o nieprawidłowym formacie pliku. jakies sugestie?

  5. Hej, może trochę nie do końca w temacie wpisu, ale chciałem zapytać o wtyczkę jaką wykorzystujesz do komentarzy. Bardzo fajnie to wygląda, możesz podzielić się nazwą?

  6. Świetny poradnik, udało mi się uruchomić formularz.
    Kiedy jednak otrzymuję wiadomość wysłaną z formularza i odbieram ją w programie pocztowym to w polu “od” mam swój własny adres email, a nie email osoby, która wysłała wiadomość. Chcąc odpowiedzieć na takiego maila klikam odpowiedz, co w konsekwencji powoduje, że odpowiadam sam sobie 🙂 Da się to zmienić?
    Próbowałem w pole from wpisać “[your-email]” jednak pojawia się błąd.

  7. Witam
    Mam na swoim WP formularz zgłoszeniowy. Czy da się zrobić aby nadawcą email był adres zgłaszającego, który podał w treści formularza?
    Maile wchodzą mi do CRM i chciałbym identyfikować zgłaszającego po jego adresie email, ale nie mogę tego zrobić bo obecnie wszystkie wiadomość idą z tego samego adresu nadawcy WP.

    1. Nope. Obawiam się, że to zbyt unikalne rozwiązanie. Raczej osadziłabym formularz CRMu na swojej stronie i powinno być ok.

  8. Cześć,
    Mam problem z wrzucaniem plików na serwer z formularza i z reCAPTCHA v3. U mnie na serwerze w Linuxpl jak przesyłam plik z formularza to wg. formularza jest wszystko OK, ale plik się nie wgrywa do określonej lokalizacji na serwerze. Kolejny problem to ja przechodzę na reCAPTCHA v3 to wszystkie wiadomości traktuje mi jako spam i nie wysyła. Komunikat w pomarańczowej ramce.

  9. Witam,
    szukam wtyczki do przeprowadzania ankiet/sond co ważne w języku polskim. Czy mogę liczyć na podpowiedź? 🙂 Pozdrawiam

    1. Już mnie olśniło, żeby wstawić widget tekstowy i tam shortcode. Teraz główkuję jak zedytować wygląd formularza w stopce? Da się?:) Pozdrawiam!

  10. Witam. Pani Kasiu, jak zrobić żeby pole wymagane po nie wpisaniu treści wysłało wiadomość. Pomagam koledze i ma właśnie ten problem. Klienci zapominają o polach wymaganych i później skarżą się że nie che im wysłać wiadomości ☹️ Może starsze osoby nie wiem … Proponowałem koledze, żeby usunąć te pola ale nie chce, chce je zostawić..

    1. W Contact form 7 trzeba w ustawieniach pól zaznaczyć, że mają być obowiązkowe + najlepiej opisać te pola, że są obowiązkowe.

  11. Witem. Bardzo prosto i dokładnie opisane działanie wtyczki. Mam wszystko porobione tak jak należy, jednakże po wyborze z listy rozwijalnej (5 tematów i każdy przypisany do adresu e-mail) pole w którym jest najdłuższy opis jest też najdłuższe. W zwiazku z tym mam pytanie, czy nie da się “złamać” tego wpisu na jeden ale krótszy z zawartością?
    Przykład obecny: Chciałbym się dowiedzieć do której jest otwarty sklep
    Przykład oczekiwany: Chciałbym się dowiedzieć
    do której jest otwarty sklep

    1. Pewnie się da dopisać kawałek kodu. Napisz na grupie Fb “WordPress (nie tylko) dla blogerów” – z pewnością ktoś pomoże 🙂

Skomentuj ola Anuluj pisanie odpowiedzi

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

Sięgnij po więcej!