Jak dodać prosty formularz kontaktowy do WordPressa?
Formularz kontaktowy to podstawowy element każdej strony internetowej. Umożliwia szybką i prostą komunikację z naszymi użytkownikami, klientami, czy partnerami. Istnieje bardzo dużo popularnych wtyczek do dodania formularza kontaktowego do WordPressa.
Jak dodać formularz kontaktowy WordPress w 6 krokach
W tym poradniku pokażę jak dodać prosty formularz kontaktowy, dokładnie taki jak znajdziesz na mojej stronie kontaktowej. Wykorzystam do tego najlepszą wg mnie wtyczkę do tworzenia formularzy w WordPressie: Gravity Forms.
Krok 1: Kup i pobierz Gravity Forms
Na wstępie musisz wiedzieć, że Gravity Forms to płatna wtyczka i nie ma ona darmowej wersji (nawet uproszczonej). Dlatego najpierw musisz kupić Gravity Forms i pobrać ją bezpośrednio ze strony autorów.
Krok 2: Zainstaluj i włącz Gravity Forms
Przejdź do kokpitu swojego WordPressa i z menu wybierz pozycję Wtyczki → Dodaj nową, a następnie kliknij przycisk Wyślij wtyczkę na serwer.
Zobacz również poradnik o instalacji wtyczki WordPress →
Krok 3: Zainstaluj polskie tłumaczenie
Wtyczka Gravity Forms jest w 100% przetłumaczona na polski przeze mnie. Tłumaczenie jednak nie jest dołączone do paczki z wtyczką w związku z tym musisz je zainstalować ręcznie. Pobierz tłumaczenie Gravity Forms →
Krok 4: Dodaj formularz
Przejdź do menu Formularze → Nowy formularz.
Wpisz tytuł formularza. Opis jest opcjonalny. Następnie kliknij przycisk Utwórz formularz.
Krok 5: Dodaj pola do formularza
W następnym kroku możesz dodać pola do formularza.
Do wyboru masz bardzo dużo różnych typów pól. Nie tylko pola tekstowe, ale również listy wyboru, checkboksy, czy przyciski radio. W tym poradniku dodamy tylko kilka podstawowych pól.
Imię i nazwisko
Rozwiń sekcję Zaawansowane pola i kliknij pole Imię i nazwisko. To pole pozwala na dodanie osobnych pól na imię i nazwisko.
Masz do wyboru kilka ustawień, ale możesz zostawić wszystkie domyślne. Jedyną opcją, którą tutaj zaznaczymy to, aby pole było wymagane pod nagłówkiem Reguły.
Następnie, również z sekcji Zaawansowane pola, kliknij pole E-mail. Pole pozwala na wpisanie e-maila wraz ze sprawdzeniem jego poprawności, aby mieć pewność, że klient nie wpisze tam zwykłego tekstu.
Tutaj również nie ma potrzeby niczego zmieniać w ustawieniach oprócz wspomnianej wcześniej wymagalności pola.
Wiadomość
Rozwiń sekcję Standardowe pola i kliknij Pole tekstowe, aby dodać pole na wpisanie wiadomości.
W Etykieta pola wpisz nazwę etykiety, którą zobaczy użytkownik, np. Wiadomość oraz ponownie zaznacz wymagalność pola.
Po dodaniu wszystkich pól, zapisz formularz.
Krok 6: Dodaj formularz do strony
To już ostatni krok :) Przejdź do menu Strony → Dodaj nową i utwórz nową stroną np. Kontakt dla swojego nowego formularza.
Nad edytorem tekstu znajdziesz przycisk Dodaj formularz.
Kliknij przycisk i wybierz formularz oraz opcje.
Najczęściej chowam tytuł oraz opis formularza, ale włączam technologię AJAX, dzięki której formularz przesyłany jest bez przeładowania strony.
Po kliknięciu przycisku Wstaw formularz, w edytorze pojawi się shortcode z formularzem.
Gotowe!
Twój formularz będzie się prezentował na stronie tak:
