4745 wy艣wietlenia
1565 wyraz贸w
Formularz kontaktowy WordPress krok po kroku

Formularz kontaktowy WordPress krok po kroku

Przeczytasz w 7 minut i 49 sekund 2019.07.27 | Aktualizacja: 4 miesi膮ce temu
Formularz kontaktowy WordPress krok po kroku

Formularz kontaktowy WordPress to najprostszy spos贸b na umo偶liwienie klientom kontaktu z Tob膮 lub Twoj膮 firm膮. W tym poradniku dowiedz si臋 jak krok po kroku wdro偶y膰 formularz kontaktowy w WordPress.

Czym jest formularz kontaktowy?

Formularzem kontaktowym nazywamy element na stronie internetowej, kt贸ry pozwala na szybkie wys艂anie wiadomo艣ci lub pozostawienie swoich danych kontaktowych na interesuj膮cej nas stronie internetowej. Formularz kontaktowy jest nieod艂膮cznym elementem nowoczesnych stron www, poniewa偶 korzystanie z niego jest niezwykle proste i zazwyczaj sprawdza si臋 do uzupe艂nienia kilku p贸艂 (np. imi臋, adres e-mail i tre艣膰 wiadomo艣ci) oraz klikni臋ciu przycisku wys艂ania wiadomo艣ci.

Nie inaczej jest w przypadku platformy聽WordPress, gdzie formularz kontaktowy pozwala na zwi臋kszenie konwersji ze strony internetowej w postaci uzyskiwania bardzo warto艣ciowych lead贸w.

Formularz kontaktowy w WordPress

Aby skorzysta膰 z formularza kontaktowego w WordPress nie musisz mie膰 specjalistycznej wiedzy, czy te偶 p艂aci膰 programi艣cie krocie za stworzenie tego modu艂u dla Twojej strony www. W przypadku WordPress niezawodnym rozwi膮zaniem, wybranym przez miliony u偶ytkownik贸w na ca艂ym 艣wiecie jest wtyczka Contact Form 7.

Zobacz tak偶e poradnik jak zainstalowa膰 WordPress w 5 minut.

Efekt jaki mo偶esz uzyska膰 po jej instalacji i konfiguracji mo偶esz sprawdzi膰 np. na naszej stronie klikaj膮c w przycisk kontaktu.

Contact Form 7 daje praktycznie nieograniczone mo偶liwo艣ci konfiguracji i dostosowania formularza kontaktowego (tak偶e na gotowych szablonach WordPress) i spe艂ni w 100% potrzeby wi臋kszo艣ci os贸b i firm. W tym poradniku dowiesz si臋 natomiast jak tego dokona膰.

Formularz kontaktowy krok po kroku w WordPress

Przeprowadzimy Ci臋 teraz krok po kroku przez proces instalacji, konfiguracji i dostosowania formularza kontaktowego w WordPress na przyk艂adzie wtyczki CF7.

Pami臋taj, aby przed konfiguracj膮 wtyczki poprawnie skonfigurowa膰 SMTP w WordPress je偶eli chcesz skorzysta膰 do wysy艂ki formularzy kontaktowych z w艂asnej poczty.

Zaczynamy 馃

1. Instalacja formularza kontaktowego

Pierwszym krokiem jest oczywi艣cie instalacji wtyczki. Najpro艣ciej b臋dzie zrobi膰 to z zak艂adki Wtyczki i Dodaj now膮 wyszukuj膮c w polu Contact Form 7. Zainstaluj wtyczk臋, a nast臋pnie aktywuj j膮 w WordPress.

Formularz kontaktowy WordPress - instalacja formularza

Instalacja formularza kontaktowego WordPress.

2. Konfiguracja formularza kontaktowego

Poka偶emy Ci teraz jak skonfigurowa膰 wszystkie opcje formularza kontaktowego w CF7.

2.1 Formularz

Gdy Twoja wtyczka do formularz kontaktowych jest ju偶 zainstalowana i gotowa do u偶ycia, po od艣wie偶eniu panelu administratora zobaczysz z lewej strony zak艂adk臋 Formularze. Kliknij w ni膮, aby przej艣膰 do konfiguracji swojego formularza kontaktowego WordPress.

Formularz kontaktowy WordPress - konfiguracja formularza

Konfiguracja formularza kontaktowego w WordPress.

Przy pierwszej instalacji wtyczka dodaje jeden nowy formularz kontaktowy, kt贸ry mo偶esz jest prawie gotowy do u偶ycia na Twojej stronie WordPress.

Teraz kliknij w Edytuj pod nazw膮 formularza, aby przej艣膰 do jego edycji. Dla lepszego zobrazowania tego jak powinna wygl膮da膰 konfiguracja formularza kontaktowego, przygotowali艣my dla Ciebie ju偶 wype艂niony przez nas formularz kontaktowy:

Formularz kontaktowy WordPress - edycja formularza

Edycja formularza kontaktowego w WordPress.

W pierwszej zak艂adce Formularz znajduj膮 si臋 pola prezentowane 聽u偶ytkownikowi. W tym przypadku b臋d膮 to pola: imi臋 i nazwisko, adres e-mail, temat, tre艣膰 wiadomo艣ci, quiz oraz przycisk wysy艂ania wiadomo艣ci. Oczywi艣cie konfiguracja p贸l mo偶e by膰 dowolna, a s艂u偶膮 do tego przyciski znajduj膮ce si臋 powy偶ej pola edycji formularza kontaktowego WordPress:

Formularz kontaktowy WordPress - dodawanie p贸l

Formularz kontaktowy WordPress – dodawanie p贸l

Do wyboru masz pola takie jak:

  • Tekst – Zwyk艂y tekst przesy艂any przez u偶ytkownika np. imi臋.
  • Email – Pole do adresu e-mail.
  • Adres URL – Pole do wpisania strony internetowej.
  • Telefon – Pole do uzupe艂nienia telefonu.
  • Liczba – Pole liczbowe.
  • Data – Pole z wyborem daty
  • Pole tekstowe – Pole do tre艣ci wiadomo艣ci.
  • Menu rozwijane – Rozwijane menu z wyborem .
  • Pole wyboru – Checkbox z wielokrotnym wyborem.
  • Pole jednokrotnego wyboru – Checkbox z jednokrotnym wyborem.
  • Wyra偶enie zgody – Checkbox np. pod RODO.
  • Quiz – Zagadka do np. ochrony przed spamem (jak u nas).
  • Plik – Pole do za艂膮czenia pliku przez u偶ytkownika.
  • Przycisk wys艂ania formularza – Przycisk do wys艂ania wype艂nionego formularza przez u偶ytkownika (wstawiamy zawsze na ko艅cu).

Wybieraj膮c odpowiedni typ pola uchronisz si臋 przed b艂臋dami u偶ytkownik贸w w formularzu kontaktowym np. brakiem @ w adresie e-mail.

Ok. Nie b臋dziemy teraz rozpisywa膰 si臋 na temat ka偶dej mo偶liwo艣ci stosowania powy偶szych p贸l. To co musisz zapami臋ta膰 to spos贸b ich dodawania oraz konfiguracji. Kliknij teraz w dowolnym miejscu w polu edycji formularza, a nast臋pnie na jeden z przycisk贸w do g贸ry np. tekst. Zobaczysz taki o to ekran z mo偶liwo艣ci膮 dodania pola tekstowego:

Formularz kontaktowy WordPress - wstawianie pola

Wstawianie pola tekstowego w formularzu kontaktowym WordPress.

  1. Typ pola – zaznacz, czy chcesz, aby pole by艂o obligatoryjne dla u偶ytkownika.
  2. Nazwa – Dowolna nazwa pola, musi by膰 unikatowa [nie jest widoczna dla u偶ytkownika].
  3. Domy艣lna warto艣膰 – To co pojawi si臋 w polu domy艣lnie, najlepiej stosowa膰 z parametrem „U偶yj tego tekstu jako znikaj膮cej podpowiedzi w polu”.
  4. Akismet – Opcja widoczna tylko przy zainstalowanej wtyczce Akismet. Nic nie zmieniaj.
  5. Atrybut ID – Tutaj r贸wnie偶 odradzamy dodawanie czegokolwiek.
  6. Atrybut klasy – Dodawanie klasy CSS [tylko dla programist贸w].

Przy innych typach p贸l mo偶esz spotka膰 jeszcze opcje:

  1. Zakres – Np. liczbowy lub daty od do.
  2. Opcje – Opcje do wyboru np. w menu rozwijanym lub checkboxach, dodawane jedna pod drug膮.
  3. Pytania i odpowiedz – 聽Mo偶liwo艣膰 dodania quizu z wieloma pytaniami i odpowiedziami.

Po dodaniu nowego pola, mo偶esz je bez problemu przenosi膰 poprzez wycinanie i wklejanie w inne miejsce:

WordPress formularz kontaktowy- zmiana kolejno艣ci p贸l

Zmiana kolejno艣ci p贸l w WordPress.

Do ka偶dego pola mo偶esz doda膰 te偶 tytu艂 pola, widoczny dla u偶ytkownika. Wstawiasz go pomi臋dzy <label> a </label> dok艂adnie tak jak na powy偶szym przyk艂adzie.

W formularzu kontaktowym WordPress koniecznie musi znajdowa膰 si臋 przycisk jego wys艂ania. Warto tak偶e skorzysta膰 z opcji dodania wyra偶ania zgody na przetwarzanie danych zgodnie z RODO.

Konfiguracja p贸l zale偶y tylko od Ciebie. Mo偶esz np. zrezygnowa膰 z podawania adresu e-mail je偶eli chcesz kontaktowa膰 si臋 z klientem tylko telefonicznie lub zostawi膰 np. tylko samo pole adresu e-mail – wtedy formularz kontaktowy mo偶e pos艂u偶y膰 jako pole do budowania bazy mejlingowej. Po skonfigurowaniu formularza kontaktowego WordPress zapisz ustawienia i przejd藕 do zak艂adki Email.

2.2 Email

W tym miejscu edytujesz adres e-mail, kt贸ry otrzymasz po wys艂aniu wiadomo艣ci z formularza kontaktowego przez u偶ytkownika.

Formularz kontaktowy WordPress - Email

Konfiguracja e-maili z formularza kontaktowego.

Na samej g贸rze znajduj膮 si臋 dost臋pne do wstawienia zmienne, kt贸re formularz kontaktowy automatycznie podstawi z danymi z p贸l, w tym przypadku s膮 to: [your-name], [your-email], [your-message] i [acceptance-628].

Prawid艂owa konfiguracja p贸l powinna wygl膮da膰 tak:

  1. Odbiorca – Tw贸j adres e-mail do odbierania formularzy kontaktowych.
  2. Nadawca – Nazwa nadawcy e-maila + adres e-mail w tej samej domenie, na kt贸rej si臋 on znajduje.
  3. Temat – Temat wiadomo艣ci z formularza kontaktowego. Mo偶esz wstawi膰 tu np. zmienn膮 [your-name], kt贸ra doda imi臋 i nazwisko osoby wype艂niaj膮cej formularz kontaktowy.
  4. Dodatkowe nag艂贸wki – Nag艂贸wek Reply-To m贸wi do kogo ma by膰 wys艂ana odpowied藕 na t膮 wiadomo艣膰, w tym przypadku na adres e-mail osoby z formularza kontaktowego. Pozostaw bez zmian.
  5. Tre艣膰 wiadomo艣ci – To miejsce na wstawienie wszystkich danych z p贸l z formularza kontaktowego, kt贸re uzupe艂ni艂 klient. Uk艂ad wiadomo艣ci jest dowolny, jednak warto zastosowa膰 czytelne oznaczenie p贸l np.: Imi臋 i nazwisko: <[your-name]>. Zaznaczenie opcji Usu艅 linie zawieraj膮ce puste tagi sprawi, 偶e puste i nie wymagane pola znikn膮 z wiadomo艣ci, a U偶yj tre艣ci w formacie HTML聽zmieni wiadomo艣膰 ze zwyk艂ej tekstowej na HTML.
  6. Za艂膮czniki – To pole na wstawianie zmiennych np. [file file-413] w celu za艂膮czenia do wiadomo艣ci pliku dodanego przez u偶ytkownika.

Opcj膮 wart膮 uwagi jest checkbox U偶yj emaila (2), kt贸ry pozwala na stosowanie autorespondera (automatyczne wys艂anie wiadomo艣ci do u偶ytkownika po wys艂aniu formularza kontaktowego). Jego konfiguracja jest identyczna z powy偶szym e-mailem.

Po konfiguracji e-mail w formularzu kontaktowym zapisz ustawienia.

2.3 Komunikaty

To miejsce na t艂umaczenia komunikat贸w, kt贸re wy艣wietlaj膮 si臋 w r贸偶nych sytuacja pod formularzem kontaktowym np. w przypadku b艂臋dnie wprowadzonych danych lub wys艂aniu wiadomo艣ci.

Formularz kontaktowy WordPress - komunikat

Komunikaty w formularz kontaktowym w WordPress.

2.4. Ustawienia dodatkowe

Ustawienia dodatkowe to miejsce na zaawansowane opcje i dla bezpiecze艅stwa polecamy pozostawienie tego pola pustego. Aby dowiedzie膰 si臋 o mo偶liwych opcjach kliknij niebieski link do strony producenta.

Formularz kontaktowy WordPress - ustawienia dodatkowe

Ustawienia dodatkowe w formularzu kontaktowym WordPress.

3. Dodawanie formularza kontaktowego

Aby doda膰 formularz kontaktowy na stron臋 WordPress nale偶y teraz skopiowa膰 jego shortcode. O tym jak to zrobi膰 i czym jest shortcode w WordPress napisali艣my w naszym poradniku WordPress Shortcode.

Skopiuj wi臋c kr贸tki kod formularza kontaktowego i dodaj go na dowoln膮 stron臋 WordPress i sprawd藕 efekty. Przyk艂ad naszego formularza kontaktowego mo偶esz zobaczy膰 na samym dole tego poradnika 馃憞馃憞馃憞 mamy nadziej臋, 偶e skorzystasz z niego i skontaktujesz si臋 z nami. Ch臋tnie pomo偶emy Ci wdro偶y膰 i skonfigurowa膰 formularz kontaktowy idealnie dopasowany do Twojej strony WP 馃

Jeste艣my by pomaga膰

Skorzystaj z natychmiastowej pomocy ekspert贸w WordPress. Wy艣lij nam wiadomo艣膰 za pomoc膮 formularza kontaktowego i opisz nam sw贸j problem lub to czego potrzebujesz.

Nazwa firmy
Sirius Pro

Dane firmy
ul. Grzybowska 87
00-844 Warszawa

Identyfikator
PL 9111958679

Na stronie Sirius Pro nie korzystamy z plik贸w cookies oraz kod贸w 艣ledz膮cych, a tak偶e nie profilujemy Twojej aktywno艣ci, dzi臋ki czemu mo偶esz korzysta膰 z niej ca艂kowicie anonimowo i prywatnie.