Jak stworzyć Formularz Kontaktowy w WordPress

Niezależnie od tego czy prowadzisz bloga, serwis informacyjny, czy sklep internetowy, warto byłoby pomyśleć o wdrożeniu formularza kontaktowego (zakładając, że jeszcze go nie masz). Z doświadczenia wiem, że zapytania z formularza potrafią stanowić nawet większość wszystkich, które do nas docierają. Z tego powodu pokażę Ci w kilku prostych krokach, w jaki sposób bez programowania wdrożyć formularz kontaktowy na swoją stronę opartą o WordPress.

Dlaczego warto mieć formularz kontaktowy na swojej stronie?

• Wielu odbiorców znacznie chętniej sięga po kontakt z formularza, ponieważ nie musi do tego otwierać swojej skrzynki e-mail. Załatwia się to zwykle znacznie prościej i jedynie czeka na odpowiedź na swoim mailu lub na ewentualny kontakt telefoniczny (jeżeli ustawimy takie pole).
• Za pomocą pól w formularzu możesz sprecyzować jakich informacji oczekujesz od swoich klientów lub odbiorców. Możesz na przykład ustawić pole, w którym użytkownik wybierze kategorię zgłoszenia, co będzie pomocne dla posegregowania ich i na przykład rozdzielenia między konkretnych pracowników. Oprócz tego dobrym pomysłem może okazać się na przykład pole na numer telefonu, dzięki czemu będziesz mógł skontaktować się z taką osobą bez konieczności pisania do niej maila, których wiele osób w ogóle nie przegląda.
• Chcąc zautomatyzować trochę proces odpowiadania na wiadomości, szczególnie przy większej skali, możesz dostarczyć użytkownikom automatycznych odpowiedzi na najczęściej zadawane pytania.

Dużą zaletą formularza jest też brak konieczności umieszczania swojego adresu e-mail na stronie internetowej. Jest to o tyle dużą zaletą, że adres e-mail umieszczony po prostu w postaci tekstowej bez dodatkowej ochrony może zostać łatwo przechwycony przez spamerów, którzy chętnie zapchają Twoją pocztę niekoniecznie interesującymi treściami.

Jak dodać formularz kontaktowy na stronę WordPress?

Jak niemal wszystko w WordPress, najwygodniej można to zrobić za pomocą dedykowanej wtyczki. Do tego celu możemy użyć na przykład wtyczki Contact Form 7 lub Contact Form by WPForms. W tym poradniku użyję tej drugiej, ze względu na przyjemny drag & drop (przeciągnij i upuść). Może się ona okazać nieco bardziej intuicyjna dla użytkownika, który woli sobie wszystko po prostu “wyklikać”.

Zamiast pobierać wtyczkę ze strony WordPress i ręcznie wgrywać ją przez nasz panel lub FTP, proponuję po prostu wejść w zakładkę “Wtyczki” -> “Dodaj nową” i wyszukać w prawym górnym rogu interesującą nas wtyczkę poprzez wpisanie nazwy. Jest to znacznie szybsza i prostsza metoda, ale trzeba uważać, żeby na pewno pobrać właściwą wtyczkę, ponieważ zwykle wyświetla się ich dość sporo i łatwo się pomylić (zwróć szczególną uwagę na parametry takie jak nazwa, obrazek i ilość instalacji).

Po pobraniu wtyczki musimy ją jeszcze włączyć. Możemy zrobić to w zakładce “Wtyczki” -> “Zainstalowane Wtyczki”. Po znalezieniu wtyczki na liście klikamy “Włącz” w lewym dolnym rogu.

Ustawienie formularza według naszych preferencji

Mamy już naszą wtyczkę. Zanim jednak wyświetlimy gotowy formularz naszym użytkownikom, powinniśmy go pierw stworzyć zgodnie z naszymi upodobaniami. Powinniśmy teraz przejść do zakładki “WPForms” w naszym menu (u mnie pojawiła się ona tuż pod zakładką “Komentarze”).

Dodajmy więc nasz pierwszy formularz. Możemy to zrobić poprzez naciśnięcie przycisku “Add new”.

Powinniśmy teraz zostać przeniesieni na podstronę ustawień, gdzie wpisujemy w pole nazwę formularza (pozostaje ona w panelu administratora, więc dajemy taką, pod jaką później będziemy chcieli znajdować ten formularz). Ja ustawiłem “Mój formularz kontaktowy”, ale tak naprawdę nie ma to większego znaczenia.

Poniżej mamy do czynienia z ciekawą opcją, ponieważ możemy wybrać konkretny typ (szablon) naszego formularza. Możemy stworzyć go od zera poprzez wybór “Blank Form”, wybrać “Simple Contact Form” do utworzenia formularza kontaktowego, Newsletter Signup Form do formularza pozwalającego zapisać się na Newsletter, lub nawet Suggestion Form, który umożliwi zadawanie użytkownikom pytań w celu określenia sugestii. Wersja PRO wtyczki oprócz wielu innych dodatków, dodaje jeszcze więcej predefiniowanych szablonów. Dla celów tego poradnika skorzystam w tym przypadku z szablonu “Simple Contact Form”. Wystarczy najechać na wybrany szablon kursorem i nacisnąć “Create a Simple Contact Form”.

Teraz naszym oczom powinien ukazać się gotowy, całkiem funkcjonalny formularz kontaktowy. Zanim jednak wdrożymy go na stronę, dobrze byłoby pierw przetłumaczyć poszczególne pola. Możemy zrobić to poprzez naciśnięcie na wybrane pole (w lewym rogu powinny pojawić się opcje edycyjne). W tym miejscu chcę zwrócić też Waszą uwagę na opcję “Required”. Jeżeli będzie ona zaznaczona, wówczas uzupełnienie pola będzie wymagane. W rozwijanym “Advanced Options” będziecie mogli też zmienić sam wygląd pola, czy ustawić predefiniowane właściwości “value”. Oprócz zmiany nazwy pola zmieniłem też format na “Simple”, bo nie chcę, żeby pole z nazwą użytkownika/imieniem i nazwiskiem rozkładało się na dwa osobne (kwestia indywidualnych preferencji).

Jeżeli w Waszym formularzu będziecie chcieli zbierać jakieś dane osobowe, w związku z RODO zalecam kontakt ze specjalistą, który pomoże wdrożyć Wam odpowiednie regulaminy i podpowie, jak powinniście zrobić to technicznie. Często może się okazać, że wymagana będzie jakaś dodatkowa zgoda, której nie ma domyślnie w formularzu. Wówczas możemy skorzystać z opcji dodawania nowych pól i dodać na przykład pole “Checkboxes”.

Domyślnie wyświetliły się u mnie trzy pola wyboru. W tym przypadku będę chciał zostawić tylko jedno, zmienić nazwę na treść zgody i ustawić pole na “Required”, żeby musiało zostać potwierdzone przez użytkownika. Po naciśnięciu na pole pojawi nam się możliwość edycji.

Teraz przejdziemy do zapisania naszego formularza. Aby to zrobić, naciskamy na przycisk “Submit” pod formularzem. Teraz będziemy mogli zmienić nazwę formularza, treść jego opisu i ustawić wiele innych opcji jak na przykład ochrona antyspamowa.

Polecam przetłumaczyć pola “Submit Button Text” i “Submit Button Processing Text”.

Po ustawieniu tych pól możemy przejść jeszcze do zakładek “Notifications” i “Confirmations”. W tym przypadku będziemy mogli tam włączyć powiadomienie nas o nowo wysłanym formularzu i zdefiniować, co ma się stać po wysłaniu formularza przez użytkownika (można wyświetlić mu wiadomość, pokazać konkretną podstronę, lub przekierować go na konkretny adres URL). W przypadku pokazania mu wiadomości warto przetłumaczyć ją na język, w którym jest strona internetowa – w moim przypadku cała wtyczka domyślnie jest po angielsku.

Jeśli ustawimy wszystkie pola według naszych preferencji, możemy w końcu zapisać nasz formularz. Możemy zrobić to poprzez naciśnięcie przycisku “Save” w prawym górnym rogu.

Umieszczanie formularza na naszej witrynie

Teraz proponuję nacisnąć przycisk “EMBED” i wybrać sposób umieszczenia go na konkretnej stronie. Uważam, że dość wygodną i bardzo elastyczną opcją będzie “use a shortcode”. Za pomocą krótkiego kodu osadzimy teraz formularz w dowolnym miejscu w naszej witrynie.

Skopiujmy go i wstawmy na stronę lub do wpisu, w którym będziemy chcieli umieścić formularz.

Tak wygląda gotowy formularz na mojej stronie, a w zasadzie osadzony w wersji podglądowej tego wpisu:

Jak edytować formularz?

Jeśli masz już swój formularz, ale chcesz w nim dokonać jakichś zmian, możesz znów wybrać w swoim menu w panelu administracyjnym zakładkę “WPForms” i z listy wybrać konkretny formularz (najechać na niego myszką i nacisnąć “Edit”). W moim przypadku będzie to “Mój formularz kontaktowy”.

Jak osadzić formularz w sidebarze?

Jeśli Twój motyw obsługuje widgety, wystarczy dodać do Sidebara pole “WPForms”, ustawić konkretny tytuł i wybrać z listy formularz, który chcesz wyświetlić użytkownikom.