Jak dodać formularze kontaktowe za pomocą wtyczki – P2: Użyj WPForms

W poprzednim artykule z serii „Formularz kontaktowy” dowiedzieliśmy się, czym jest formularz kontaktowy i jak korzystać z wtyczki Contact Form 7. Zgodnie z obietnicą napisałem kolejny samouczek z WPForms i pokażę ci w tym artykule.

WPForms to wtyczka freemium do formularza kontaktowego typu „przeciągnij i upuść” z podglądem w czasie rzeczywistym. Z mojego doświadczenia wynika, że ​​praca z tą wtyczką jest łatwa i wygodna.

Czy pamiętasz ten przykładowy formularz rejestracyjny na uniwersytet, który stworzyliśmy w części 1 tej serii? Teraz stworzymy to samo za pomocą WPForms.

Krok 1: Zainstaluj i aktywuj wtyczkę WPForms

Ta wtyczka ma darmową wersję na wordpress.org, więc wystarczy zainstalować i aktywować wtyczkę bezpośrednio w panelu administratora .

Formularz kontaktowy od WPForms – Kreator formularzy przeciągnij i upuść dla WordPress

Autorzy: WPForms

Aktualna wersja: 1.7.1.2

Ostatnia aktualizacja: 18 listopada 2021

wpforms-lite.1.7.1.2.zip

98% Ratings 5,000,000+ Zainstalowano WP 4.9+ Wymaga

Krok 2: Utwórz nowy formularz kontaktowy i wybierz szablon

W panelu administracyjnym przejdź do WPForms > Dodaj nowy .

Oto interfejs, z którym musisz pracować:

Na lewym pasku bocznym możesz zobaczyć 5 sekcji:

1. Konfiguracja : Nazwij formularz kontaktowy i wybierz jego szablon.
2. Pola : dodaj i dostosuj pola formularza kontaktowego.
3. Ustawienia : Skonfiguruj powiadomienia, potwierdzenia i ustawienia ogólne.
4. Marketing : Połącz z narzędziami do e-mail marketingu, takimi jak Constant Contact, Campaign Monitor, Mailchimp,…
5. Płatności : Dodaj płatność z PayPal Standard, Stripe i Authorize.Net.

Uwaga : nie prowadzę żadnej kampanii e-mail marketingowej, a mój formularz nie wymaga informacji o płatności. Dlatego nie potrzebuję sekcji Marketing i Płatności .

W sekcji Konfiguracja wprowadź nazwę formularza i wybierz żądany szablon.

Istnieją cztery domyślne szablony:

• Prosty formularz kontaktowy
• Formularz zapisu do newslettera
• Sugestia dla
• Pusty formularz

Oprócz Pustego formularza inne szablony mają własne wstępnie utworzone pola, które można wykorzystać do szybszego tworzenia formularzy kontaktowych. Ponadto możesz zainstalować dodatki WPForms (dostępne tylko w wersjach płatnych), aby uzyskać więcej szablonów.

W tym artykule wybieram szablon Blank Form, aby krok po kroku zbudować formularz kontaktowy od początku. Pomoże ci to łatwiej i głębiej zrozumieć wszystko.

Krok 3: Dodaj pola do formularza kontaktowego

Dodaj pola

Po wybraniu szablonu Pusty formularz w kroku 2 zostaniesz przeniesiony do sekcji Pola .

Aby dodać pola do formularza kontaktowego, przeciągnij żądane pola z zakładki Dodaj pola i upuść je do formularza kontaktowego.

Następnie, aby dostosować pole, kliknij je, a następnie edytuj jego parametry na karcie Opcje pól .

Poza tym możesz usunąć lub zduplikować pole, najeżdżając na nie i klikając żądane przyciski.

W tym artykule muszę dodać następujące pola:

Po dodaniu wszystkich tych pól musisz dostosować każde pole w kolejnych krokach.

Dostosuj opcje ogólne dla każdego pola

Ogólnie istnieją dwa rodzaje opcji dostosowywania każdego pola:

Podstawowe opcje : wszystkie pola zawierają te opcje i powinieneś bezwzględnie z nimi pracować, aby formularz kontaktowy był przejrzysty i zrozumiały.

• Etykieta : wprowadź nazwę pola, które chcesz wyświetlić.
• Opis : jest to tekst wyświetlany pod polem, który informuje użytkowników, co mają zrobić.
• Wymagane : To opcjonalne! Zaznacz to pole, aby wypełnić to pole.

W kolejnych krokach, gdy wspomnę o „podstawowych informacjach”, oznacza to, że musisz zająć się tymi podstawowymi opcjami.

Opcje zaawansowane : dla każdego pola dostępne są zaawansowane funkcje. Radzenie sobie z nimi jest opcjonalne, ale jest kilka ważnych rzeczy, na które powinieneś zwrócić uwagę:

• Tekst zastępczy : wyświetla tekst wewnątrz pól, zanim użytkownicy wprowadzą dane. Ten tekst może służyć jako przewodnik lub przykład, aby pomóc użytkownikom łatwo zrozumieć, co muszą wypełnić. Na przykład możesz ustawić tekst zastępczy pola e-mail jako „Wprowadź swój adres e-mail”.
• Wartość domyślna : jeśli wiele osób ma tę samą odpowiedź, możesz ustawić odpowiedź domyślną, aby zaoszczędzić czas i wysiłek użytkowników. Na przykład tworzysz formularz kontaktowy dla osób mieszkających w Nowym Jorku, dzięki czemu możesz wpisać domyślną wartość „Nowy Jork” w polu „Lokalizacja”.
• Klasy CSS : wprowadź klasy CSS w tym polu, aby nadać mu styl. W kolejnym kroku dołączę w tej sekcji kod do stylizacji formularza kontaktowego.

Uwaga :

• W formularzu kontaktowym 7 możesz użyć wartości domyślnej jako tekstu zastępczego. Ale jest to wygodniejsze w WPForms, ponieważ masz oddzieloną sekcję tekstu zastępczego . Poza tym WPForms ma sekcję Opis, która wyświetla tekst pod polem. Korzystam w ten sposób, ponieważ dzięki temu mój formularz kontaktowy wygląda lepiej.

• Możesz kliknąć przycisk ze znakiem zapytania obok opcji / pól, aby przeczytać dla nich instrukcje WPForms.

Dodatkowo istnieje kilka różnych opcji w zależności od każdego pola. Dowiedzmy się, jakie one są!

Dostosuj pole „Twoje imię”

Wybierz pole Simple Line Text i po prostu wypełnij podstawowe informacje:

W tym polu znajdują się 2 dodatkowe opcje w sekcji Opcje zaawansowane :

• Limit długość : zaznacz, aby wybrać limit maksymalnej liczby znaków, które można wprowadzić w polu.
• Maska wprowadzania : Wprowadź maski wprowadzania, aby wymagać określonych formatów pola. Przeczytaj więcej szczegółów tutaj.

Dostosuj pole „Twój numer telefonu”

To pole nie ma nic specjalnego. Wystarczy wybrać pole Liczby i uzupełnić podstawowe informacje:

Dostosuj pole „Twój e-mail”

Wybierz pole E-mail i wypełnij podstawowe informacje w polu:

To pole ma jeszcze jedną podstawową opcję: Włącz potwierdzenie e-mailem . Możesz to zaznaczyć, aby poprosić użytkowników o dwukrotne podanie swojego adresu e-mail. Daje to pewność, że ich adres e-mail jest poprawny.

Dostosuj „Lokalizacja do nauki” i „Główne” pola

Najpierw wybierz pole rozwijane . W sekcji Wybory wprowadź opcje dla pola. Możesz kliknąć (+) (-), aby dodać / usunąć opcje.

Ponadto możesz również kliknąć przycisk Dodaj zbiorczo , aby dodać wiele opcji jednocześnie. W polu Dodaj wybory wypełnij pola w odpowiedniej kolejności (każdy wybór to linia), a następnie kliknij Dodaj nowe wybory .

Dodatkowo w tym polu znajdują się 2 zaawansowane opcje, o które powinieneś zadbać:

• Styl : Możesz wystylizować swoje menu rozwijane za pomocą dwóch opcji: klasycznego i nowoczesnego. Nowoczesny styl pozwala na wyszukiwanie według słów kluczowych. Dlatego dobrze sprawdza się w menu z dużą ilością opcji (ponad 10 opcji).
• Dynamiczne wybory : zezwól użytkownikom na wybór spośród typów postów lub taksonomii. Jeśli na przykład wybierzesz Źródło typu postów dynamicznych jako posty , każdy wybór z menu rozwijanego będzie postem w Twojej witrynie.

Dostosuj pole „Zarejestruj się w”

Wybierz pola wyboru i wprowadź opcje, takie jak pola rozwijane .

W tym polu znajdują się 2 zaawansowane opcje, o które powinieneś zadbać:

• Użyj wyboru obrazu : możesz go użyć, aby zilustrować swoje wybory i uatrakcyjnić formularz kontaktowy.
• Losowe wybory : Dzięki temu ludzie nie będą wybierać wyboru tylko dlatego, że jest to pierwszy z nich.

Krok 4: Skonfiguruj formularz kontaktowy

Po utworzeniu formularza kontaktowego musimy go skonfigurować. W bezpłatnej wersji WPForms możesz skonfigurować trzy sekcje poniżej:

Konfiguruj ustawienia ogólne

Wtyczka WPForms zawiera szczegółowe instrukcje dla każdej opcji w tej części. Powinieneś kliknąć przycisk ze znakiem zapytania, przeczytać go uważnie i zwrócić uwagę na te pola:

• Prześlij tekst przycisku : W formularzu kontaktowym 7 musisz utworzyć pole Prześlij . Ale w WPForms przycisk przesyłania jest wbudowany. Możesz zmienić tekst tego przycisku w tej sekcji na dowolny, taki jak Zarejestruj się, Wyślij e-mail, …
• Włącz ochronę antyspamową : Czasami spamerzy mogą przeszkadzać Ci przez tony „śmieci”. W takim przypadku powinieneś włączyć tę funkcję antyspamu.

Skonfiguruj powiadomienia

Jeśli chcesz otrzymywać powiadomienia e-mail za każdym razem, gdy użytkownik prześle formularz kontaktowy, przejdź do opcji Ustawienia > Powiadomienia .

Możesz dodać „inteligentne tagi” lub tekst do pól w tej sekcji, aby łatwiej zarządzać wiadomościami e-mail otrzymywanymi, gdy użytkownik przesyła formularz kontaktowy.

Uwaga : Tagi inteligentne mogą automatycznie dodawać informacje do powiadomień formularza kontaktowego.

Oto przykład moich ustawień:

Skonfiguruj potwierdzenia

W sekcji Potwierdzenie możesz skonfigurować wiadomości, które użytkownicy otrzymują po przesłaniu formularzy kontaktowych.

Po zakończeniu całej konfiguracji wystarczy kliknąć Zapisz .

Krok 5: Wyświetl formularz na stronach/postach

Istnieją 2 sposoby wyświetlania formularzy na stronach/postach.

Pierwszym sposobem jest kliknięcie Osadź, aby wyświetlić formularz na stronie:

Następnie umieść formularz kontaktowy na nowej lub istniejącej stronie w swojej witrynie.

Drugim sposobem jest wstawienie skróconego kodu formularza kontaktowego do stron/postów. Polecam wybrać drugi sposób, ponieważ może on wyświetlać formularz kontaktowy zarówno na postach, jak i na stronach . Aby to zrobić, w panelu administratora przejdź do WPForms > Wszystkie formularze , znajdź formularz kontaktowy i skopiuj jego skrót.

Następnie wklej ten krótki kod do żądanych postów / stron.

A oto wynik:

Nie wygląda to jeszcze na przykładowy formularz kontaktowy, więc muszę go nieco wystylizować.

Krok 6: Stylizuj formularz

W panelu administratora przejdź do WPForms > Wszystkie formularze , znajdź formularz kontaktowy, a następnie kliknij Edytuj .

Teraz kliknij każde pole, przejdź do Opcje zaawansowane > Klasy CSS i dodaj następujące wartości:

• Twoje imię i nazwisko i zarejestruj się na : ip-100
• Twój numer telefonu , e-mail , miejsce do nauki , kierunek : ip-50

Następnie przejdź do Customizer > Addition CSS , dodaj ten kod:

 .wpforms-field-container {
    wyświetlacz: elastyczny;
    flex-wrap: owijka;
		uzasadnienie-treść: spacja-między
}

.ip-50 {
    szerokość: 48%!ważne;
}

.ip-100{
		szerokość: 100%!ważne;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	maksymalna szerokość: 100%;
}

.ip-100 ul {
	wyświetlacz: elastyczny;
	uzasadnienie-treść: spacja-między;
}

div.wpforms-container-full {
    margines-dolny: 24px;
    tło: #eeeeee;
    wypełnienie: 20px;
}

Na koniec kliknij Opublikuj .

A oto wynik końcowy:

Formularz kontaktowy wygląda teraz lepiej, prawda? Cóż, właśnie zakończyliśmy ostatnie kroki, aby mieć całkowicie podobną formę do mojej próbki.

Ostatnie słowa

Z mojego doświadczenia wynika, że ​​korzystanie z interfejsu typu „przeciągnij i upuść”, takiego jak w WPForms, jest łatwiejsze i szybsze niż korzystanie z formularza kontaktowego 7. Poza tym ma wbudowany przycisk przesyłania i 2 inne przydatne sekcje, takie jak tekst zastępczy i opis . Bardzo wygodny jest również podgląd na żywo. Pomaga mi łatwiej wykrywać błędy podczas tworzenia i dostosowywania formularza.

Aby dowiedzieć się, jak korzystać z większej liczby wtyczek formularzy kontaktowych, zapoznaj się z naszym nadchodzącym artykułem z tej serii! Jeśli masz jakiekolwiek pytania dotyczące WPForms lub sugerujesz jakąkolwiek wtyczkę formularza kontaktowego, możesz zostawić ją w sekcji komentarzy.