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:
- Wejdź w zakładkę Wtyczki.
- Kliknij przycisk dodaj nową.
- W pasku po prawej stronie wpisz nazwę WPForms.
- Znajdź wtyczkę Contact Form by WP Forms i zainstaluj ją.
- Następnie aktywuj wtyczkę.
Dodanie nowego formularza
Aby dodać nowy formularz:
- Kliknij na zakładkę po lewej stronie WPForms.
- Następnie na przycisk Add New
Następnie.
- Wpisz nazwę dla Twojego formularza. (będzie widoczna tylko dla Ciebie).
- 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ę:
- Wejdź w zakładkę tools.
- Kliknij Import.
- 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.
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ą.
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.
Autor Krzysztof Gonet
Nazywam się Krzysztof Gonet. To miejsce powstało, aby pomóc Ci w stworzeniu zyskownego biznesu online opartego na Twojej pasji i talentach, abyś mógł robić to, co daje Ci satysfakcję, i poprzez Twoją pracę zmieniać świat na lepsze. Dowiedź się więcej o autorze.
„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.
Dziękuje za komentarz. Zmieniłem link do pobrania pliku.
https://drive.google.com/uc?export=download&id=1HR0_bEDJ3DYu1xn3GcsGCDgHeCfrZwgR
Pozdrawiam
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).
W takim przypadku należy zainstalować i skonfigurować wtyczkę do SMTP na przykład taką https://pl.wordpress.org/plugins/wp-mail-smtp/
Tutaj jest poradnik po angielsku. Za jakiś czas przygotuje własny. https://www.youtube.com/watch?v=KliSG4bH0mA
Pozdrawiam, Krzysztof
Nigdzie nie mogę odnaleźć kodów css do zmaiany koloru pól i wyłączenie obramowania pola
Szukałeś w podglądzie kodu?
jak sie szuka w podglądzie kodu bo tez chciałbym to zmienic
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
Hej,
Wklejam kod wyświetla go poprawnie na stronie jednak nie przekierowuje na stronę polityki prywatności tylko otwiera ponownie tą samą strone
Skonfigurowałem wszystko jak wyżej, a na email przychodzi mi failure notice
i nie ma wiadomości tylko jakieś 200 wierszy kodu jakiegoś .hi This is the qmail-send program at mail18.lh.pl.
I’m afraid I wasn’t able to deliver your message to the following addresses.
This is a permanent error; I’ve given up. Sorry it didn’t work out.
pomocy 🙁
czy ponowna konfuguracja pomoże?
Cześć, upewnij się, że prawidłowo skonfigurowałeś wtyczkę SMTP https://youtu.be/jPqXwJdrkQo?si=28E3KA0mJA_rzx1-