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. ). 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.

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ą. 

Udało się

Gratulacje udało Ci się. Stworzyć Twój formularz. 

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

Ten post ma 2 komentarzy

  1. Kasia

    “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.

Dodaj komentarz