Dzień dobry, ten artykuł jest uzupełnieniem video poradnika, który znajdziesz powyżej. Dowiesz się z niego jak dodać formularz kontaktowy do Twojej strony internetowej, która jest stworzona na WordPress. 

W poradniku korzystam z motywu Astra, jednak możesz zastosować ten proces na dowolnym motywie. 

Co daje formularz kontaktowy

Formularz kontaktowy ma na celu ułatwić Twoim klientom kontakt. Pamiętaj jednak, że nie każdy będzie chciał z niego skorzystać. Gdy budujesz stronę, kontaktu zadbaj o to aby znalazł się tam również Twój adres e-mail i/lub numer telefonu kontaktowego. Formularz kontaktowy daje Ci mnóstwo dodatkowych możliwości. Dodatkowe pola, dodawanie liczb itp. Pamiętaj jednak, że im bardziej rozbudujesz swój formularz tym mniej osób będzie chciało z niego skorzystać. W swoim formularzu dodaj tylko te pola, które są dla Ciebie niezbędne. W większości przypadków będzie:

  • Imię.
  • Adres e-mail.
  • Wiadomość.
  • Zgody na przetwarzanie danych osobowych.

Instalacja wtyczki do tworzenia formularzy WPForms WordPress

Na początek zaloguj się do swojej strony WordPress Następnie: 

  1. Wejdź w zakładkę Wtyczki. 
  2. Kliknij przycisk dodaj nową. 
  3. W pasku po prawej stronie wpisz nazwę WPForms.
  4. Znajdź wtyczkę Contact Form by WP Forms i zainstaluj ją. 
  5. Następnie aktywuj wtyczkę.

Dodanie nowego formularza

Aby dodać nowy formularz:

  1. Kliknij na zakładkę po lewej stronie WPForms.
  2. Następnie na przycisk Add New

Następnie.

  1. Wpisz nazwę dla Twojego formularza. (będzie widoczna tylko dla Ciebie). 
  2. Wybierz jedną z opcji. Możesz zacząć albo od gotowego szablonu lub stworzyć formularz kontaktowy od podstaw. 

Stworzyłeś formularz. Teraz korzystając z dostępnych opcji. Możesz wybrać co ma się w nim znaleźć. Pamiętaj aby przetłumaczyć każde z pól.  Szczegóły na temat tego jak edytować Twój formularz kontaktowy znajdziesz w video poradniku.

Gdy już dokonałeś podstawowej konfiguracji pamiętaj o dodaniu checkboxów. Ich treść będzie zależna od tego, jakie dane będziesz przetwarzać.

W niektórych przypadkach przed wysłaniem wiadomości klient będzie musiał zaakceptować, Twoją politykę prywatności. Aby miał do niej szybki dostęp powinieneś dodać do niej link.

W polu tekstowym wpisz następujący tekst

„Zapoznałam/em się z <a href=”https: //netgonet.pl/polityka-prywatnosci/” target=”_blank” rel=”noopener”>„polityką prywatności”.</a>

W miejscu  „https://netgonet.pl/polityka-prywatnosci/” Wklej link do własnej polityki prywatności i gotowe.

Gdy Twój klient kliknie w tekst politykę prywatności w nowym oknie zobaczy nową stronę.

Import gotowe formularza

Jeśli chcesz pobrać gotowy formularz kontaktowy kliknij na przycisk poniżej a nie będziesz musiał dodawać ręcznie wszystkich pól. 

Aby wgrać gotowy formularz na Twoją stronę: 

  1. Wejdź w zakładkę tools.
  2. Kliknij Import. 
  3. Następnie wybierz pobrany plik i kliknij przycisk import. 

Dodanie formularza na stronę internetową

Gdy wejdziesz do zakładki WPForms przy Twoim formularzu zobaczysz skrócony kod (shortcode np. [wpforms id=”2200″]). Gdy wkleisz kod do Twojej strony internetowej formularz pojawi się w wybranym miejscu.

Domyślny edytor stron 

Jeśli korzystasz z domyślnego edytora WordPress to musisz wejść w edycje Twojej strony i z bloków wybrać WPForms lub shortcode. 
Po kliknięciu w przycisk, formularz doda się do strony. 

formularz-kontaktowy-jak-dodac

Edycja przy pomocy Elementora. 
Należy wejść w edycje wybranej strony i z paska boczne wybrać WPForms.

Następnie umieścić formularz w wybranej kolumnie.

Elementor-formularz-kontaktowy

Zmiana wyglądu formularza kontaktowego

Jeśli chcesz zmienić wygląd swojego formularza kontaktowego masz dwie możliwości:

  • Skorzystanie z kodu CSS. – trudniejsze jednak lepsze rozwiązanie. 
  • Użyć dodatkowej wtyczki do edycji. – szybsze jednak nieco gorsze rozwiązanie. 

CSS to skrórt od kaskadowych arkuszów stylów.  Inaczej mówiąc są to zbiory zasad, które służą do formatowania/zmiany wyglądu treści na stronie.

Na przykład jeśli chcesz zmienić kolor przycisku formularza musisz w odpowiednim miejscu dodać następujący kod:

.wpforms-form button[type=submit] {

background-color: #024488 !important;

border-color: #024488 !important;

color: #fff !important;

}

background-color: #022B57 !important;

}

Powyższy kod zmieni kolor przycisku formularza na niebieski.
Kody podaje się w kodzie. (#022B57). Możesz łatwo wybrać kolor, który Cię interesuje korzystając z generatorów kolorów, na przykład koła kolorów Adobe.

Więcej gotowych przykładów kodu, dzięki, któremu będziesz mógł edytować swój formularz możesz pobrać z oficjalnej strony wtyczki.

Taki kod należy wkleić do naszego motywu. Możemy to zrobić na przykład wchodząc w zakładkę wygląd –> dostosuj– > Custom CSS/ Dodatkowy 

 

Znajomość podstaw CSS jest bardzo przydatna nawet jeśli chcesz stworzyć tylko 1 stronę. Szerzej ten temat poruszę w osobnym artykule. Na początek możesz skorzystać z drugiej opcji edycji.

Użycie dodatkowej wtyczki. Wersja bez kodowania.

  • Jeśli korzystasz z Elementora, to możesz dodatkowo zainstalować wtyczkę taką jak Happy Addons for Elementor. Dzięki niej zmienisz wygląd formularza kontaktowego bez umiejętności kodowania. Będziesz mógł na przykład:
  • Zmienić kolor przycisku w formularzu kontaktowym.
  • Zmienić tło pól formularza. 
  • Zmienić rodzaj, rozmiar czcionki w formularzu. 

Po zainstalowaniu wtyczki należy: 

  • Wejść w edycję strony przy pomocy elementora. 
  • Wybrać z paska po lewej stronie WPForms (z buźką w prawym górnym rogu). 

Następnie będziesz  mógł dostosować Twój formularz kontaktowy na stronie do swoich potrzeb. Ten proces został omówiony na filmie. 

Co jeszcze warto zrobić?

  • Przetłumacz komunikaty, które otrzymuje użytkownik formularza w przypadku popełnienia błędów. 
  • Jeśli będziesz otrzymywać SPAM możesz dodać przycisk reCAPTCHA. 
  • Przetestuj działanie swojego formularza. Spróbuj wysłać do siebie kilka wiadomości z różnych skrzynek mailowych i sprawdź czy wiadomości dochodzą. 

Co zrobić gdy wiadomości nie przychodzą?

Często zdarza się tak, że pomimo prawidłowej konfiguracji formularz nie działa. 
W takim przypadku należy zmienić domyślny sposób wysyłania maili przez WordPress. 
Domyślnie WordPress używa kodu PHP. Aby formularz zaczął działać musisz zmienić sposób wysyłania na SMTP (ang. Simple Mail Transfer Protocol). Nazwa morze brzmieć groźne jednak proces ten jest bardzo prosty i zajmie Ci kilka minut.

Konfiguracja SMTP

1. Pierwszym krokiem jest pobranie wtyczki WP Mail SMTP by WPForms 
Możesz ją pobrać z repozytorium WordPressa wchodząc we wtyczki i dodaj nową.  

2. Należy odpowiednio skonfigurować wtyczkę. Zobacz poradnik konfiguracji

Udało Ci się!

Gratulacje udało Ci się. Stworzyłeś swój pierwszy formularz kontaktowy. 

Jeśli gdzieś utknąłeś, nie umiesz sobie z czymś poradzić to napisz komentarz, postaram się pomóc. 

Podobne artykuły, które mogą Cię zainteresować

9 komentarzy

  1. „Aby wgrać gotowy formularz” czyli dodawanie pliku do WPForms. Jak stworzyć plik w jedynym wymaganym formacie czyli JSON? Tradycyjne konwertory on line nie radzą sobie (ze zmianą np z pdf); po zmianie rozszerzenia w na pliku – zadziałało, ale jak dodaję taki plik do strony pojawia się Error i komunikat: Form data cannot be imported.

  2. Sławek pisze:

    Witam, formularz wysyła wiadomość, ale nie przychodzi mi na maila. W pozycji – „Wyślij na maila” mam zapis: {admin_email}, nawet jak go zmienię na mojego maila to i tak nie dochodzą wiadomości (jak wpiszę tam innego mail, to samo).

  3. Krzysztof pisze:

    Nigdzie nie mogę odnaleźć kodów css do zmaiany koloru pól i wyłączenie obramowania pola

      1. Gabi pisze:

        jak sie szuka w podglądzie kodu bo tez chciałbym to zmienic

        1. Cześć Gabi, wystarczy, że klikniesz prawym przyciskiem myszy na dowolnej stronie i wybierzesz opcję „Zbadaj” ( ta opcja jest widoczna jeśli masz przeglądarkę Chrome).
          Pozdrawiam, Krzysztof

  4. Szymon pisze:

    Hej,

    Wklejam kod wyświetla go poprawnie na stronie jednak nie przekierowuje na stronę polityki prywatności tylko otwiera ponownie tą samą strone

Dodaj komentarz

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