Jak stworzyć formularz Multi-Step w WordPressie?

Opublikowany: 2020-07-24

Formularz wieloetapowy to długa forma podzielona na wiele części/kroków, aby ułatwić wypełnianie długich formularzy.

W przeciwieństwie do konwencjonalnych długich formularzy formularz wieloetapowy może zwiększyć współczynnik konwersji formularza w witrynie, zwłaszcza jeśli formularz ma więcej niż 3 pola formularza. Dodatkowo zachęca użytkowników do uzupełnienia żądanych informacji, gdy są one podzielone na strony, a nie prezentowane jako jedna długa forma.

Jak stworzyć wieloetapowy formularz w WordPressie?

Przede wszystkim będziesz musiał upewnić się, że WPForms jest zainstalowany w Twojej witrynie WordPress.

Teraz przejdź do WPForms » Dodaj nowy , aby utworzyć nowy formularz.

W tym poradniku stworzę prosty formularz kontaktowy.

Na pewno jesteś na karcie Konfiguracja formularza .

Teraz nazwij swój formularz i wybierz szablon , którego chcesz użyć.

Prosty szablon formularza kontaktowego
Tworzenie prostego kontaktu za pomocą wtyczki WPForm

Tutaj wybieram szablon Prostego Formularza Kontaktowego .

WPForms utworzy prosty formularz kontaktowy w konstruktorze przeciągnij i upuść.

Prosty formularz kontaktowy za pomocą WPForms
Prosty formularz kontaktowy za pomocą WPForms

Teraz nastąpi automatyczne przekierowanie do zakładki Pola , z której możesz dodawać dodatkowe pola do swoich formularzy, po prostu je przeciągając .

Pobierz wtyczkę WPForms

Możesz także kliknąć istniejące pole formularza i przeciągnąć je, aby zmienić kolejność w formularzu kontaktowym.

Następnym krokiem jest podzielenie formularza na różne części

Po dodaniu pola do formularza lub jego edycji należy dodać do witryny pole formularza Podział strony, aby podzielić je na różne strony.

Pole Podział strony znajduje się pod polami fantazyjnymi , tuż pod polami standardowymi .

Fantazyjne pole podziału strony w WPForms
Fantazyjne pole podziału strony w WPForms

Umieść pole, z którego chcesz podzielić formularz.

Możesz dodać pole Podział strony w dowolnym miejscu. Co fascynujące, możesz stamtąd dodać dodatkowe pola formularza, aby wypełnić formularz.

Idąc dalej, nadszedł czas, aby dostosować pasek postępu

Załóżmy, że chcesz wyświetlić wskaźnik postępu, aby poinformować użytkowników o różnych sekcjach formularza. W ten sposób zawsze wiedzą, gdzie są w formularzu i ile im zostało do wypełnienia, zanim klikną „Prześlij” na podstawie pasków postępu.

Aby to ułatwić, WPForms ma trzy różne paski wskaźników stylu bułki tartej:

  1. Łączniki: pokazuje pasek łączący i tytuły stron każdej części wieloetapowego formularza.
  2. Kręgi: pokazuje jeden krąg i tytuł strony na stronę w formularzu wieloetapowym.
  3. Pasek postępu: wskazuje postęp wypełniania formularza przez użytkownika.
Sekcja podziału pierwszej strony.
Sekcja podziału pierwszej strony.

Aby dostosować pasek postępu, musisz kliknąć sekcję Podział pierwszej strony .

Tutaj zobaczysz nowy panel w Edytorze formularzy , z którego możesz wybrać jeden pasek postępu. Istnieje również możliwość zmiany koloru wskaźnika postępu.

Co więcej, możesz zmienić tytuł strony , aby użytkownicy wiedzieli, w której części formularza się znajdują, jeśli wybierzesz opcję Kręgi lub Łączniki .

Sekcja drugiej strony podziału w wpforms
Sekcja drugiej strony podziału w wpforms

Aby dostosować tytuł następnej strony i przycisk przenoszący odwiedzających witrynę na następną stronę w formularzu, kliknij sekcję Podział strony utworzoną podczas dodawania podziału strony do formularza.

Wyświetl przycisk poprzedniej strony w podziale strony wpform
Wyświetl przycisk poprzedniej strony w podziale strony wpform

Możesz także włączyć funkcję, która będzie wyświetlać przycisk Poprzednia strona w formularzu. Umożliwi to odwiedzającym powrót do poprzedniej strony formularza, jeśli zechcą.

Po zakończeniu kliknij Zapisz .

Czas na konfigurację ustawień formularza

Z zakładki Ustawienia przejdź do Ogólne .

Ogólne ustawienia formularzy w WPForms
Ogólne ustawienia formularza

Możesz skonfigurować:

  • Nazwa formularza: Tutaj możesz zmienić nazwę swojego formularza.
  • Opis formularza: Możesz dodać opis swojego formularza.
  • Prześlij tekst przycisku: Dostosuj kopię na przycisku przesyłania.
  • Zapobieganie spamowi: zatrzymaj spam z formularza kontaktowego za pomocą funkcji honeypot lub Google reCAPTCHA.

Funkcja zapobiegania spamowi jest automatycznie włączana we wszystkich formularzach WordPress. W przypadku, gdy chcesz skorzystać z innej formy ochrony przed spamem, odznacz tę opcję.

  • Formularze AJAX: Włącz ustawienia AJAX bez ponownego ładowania strony.
  • Ulepszenia RODO: możesz wyłączyć przechowywanie informacji o wpisach i danych użytkownika, takich jak adresy IP i klienci użytkownika, aby zachować zgodność z wymogami RODO.

Po zakończeniu kliknij Zapisz .

Przejdźmy do konfiguracji powiadomień formularza

W tej sekcji możesz wybrać, czy chcesz otrzymywać powiadomienie o nowym wpisie (zgłoszeniu użytkownika).

Powiadomienia o formularzach
Zarządzaj powiadomieniami formularzy

Jeśli korzystasz z tagów inteligentnych, możesz również wysłać powiadomienie na adres e-mail użytkownika, gdy przesyła formularz, informując go, że go otrzymałeś i wkrótce się z nim skontaktujemy.

Kolejnym krokiem jest skonfigurowanie potwierdzenia formularza

Potwierdzenia formularzy to wiadomości z potwierdzeniami, które pojawiają się odwiedzającym po przesłaniu formularza. Zapewniają odwiedzającym, że ich formularz został przetworzony.

WPForms ma do wyboru trzy typy potwierdzeń:

  • Wiadomość: jest to domyślny typ potwierdzenia w WPForms. Gdy odwiedzający witrynę prześle formularz, pojawi się prosta wiadomość z potwierdzeniem, informująca o przetworzeniu formularza. Zajrzyj tutaj, aby uzyskać wspaniałe wiadomości o sukcesie, które pomogą zwiększyć zadowolenie klientów.
  • Pokaż stronę: ten typ potwierdzenia przeniesie odwiedzających witrynę na określoną stronę internetową w Twojej witrynie, dziękując im za przesłanie formularza. Aby uzyskać pomoc w tym zakresie, zapoznaj się z naszym samouczkiem na temat przekierowywania klientów na stronę z podziękowaniami. Koniecznie zapoznaj się również z naszym artykułem na temat tworzenia skutecznych stron z podziękowaniami, aby zwiększyć lojalność klientów.
  • Przejdź do adresu URL (przekierowanie): Ta opcja jest używana, gdy chcesz skierować odwiedzających witrynę do innej witryny.

Aby rozpocząć, kliknij kartę Potwierdzenie . Teraz wybierz typ potwierdzenia z listy rozwijanej. Tutaj wybiorę typ wiadomości.

Zarządzaj potwierdzeniem WPForms
Zarządzaj potwierdzeniem WPForms

Następnie musisz utworzyć wiadomość potwierdzającą pod wyświetlonym polem tekstowym .

Po zakończeniu kliknij Zapisz .

Teraz możesz dodać formularz do swojej witryny

Aby rozpocząć, utwórz nową stronę lub post ze swojego WordPressa. Następnie kliknij wewnątrz pierwszego bloku, wyszukaj WPForms i wybierz ikonę WPForms .

Osadzanie WPForms na stronie WordPress
Osadzanie WPForms na stronie WordPress

Widżet WPForms pojawi się wewnątrz twojego bloku. Kliknij menu rozwijane WPForms i wybierz jeden z formularzy, które już utworzyłeś.

Wybierz formularz do osadzenia z menu rozwijanego WPForms
Wybierz formularz do osadzenia z menu rozwijanego WPForms

Opublikuj swój post lub stronę, aby formularz kontaktowy pojawił się w Twojej witrynie.

Otóż ​​to. W ten sposób możesz łatwo tworzyć wieloetapowe formularze w WordPress za pomocą wtyczki WPForms.