Jak stworzyć formularz wieloetapowy w WordPress

Kilka dni temu ktoś pytał mnie o tworzenie wieloetapowych formularzy w WordPressie. Byłem na imprezie, jakoś w rozmowie, powstał problem. W tym momencie nie miałem ochoty wyjaśniać sprawy, ale pracując z WordPressem, poczułem, że go przekonałem i jakoś musiałem sprawić, by zrozumiał.

Później problem został rozważony przeze mnie i pomyślałem o napisaniu na jego podstawie samouczka, który mógłby pomóc innym w tworzeniu wieloetapowego formularza w WordPressie. Dlatego staram się to umożliwić.

Po co projektować formularze wieloetapowe?

Formularz jest jednym z najłatwiejszych sposobów zbierania informacji i nawiązywania kontaktu z odbiorcami. Może to być zwykła zwykła forma, może to być forma biznesowa lub dowolny formularz związany z ankietą.

Jednak długie formularze są czasami obrzydliwe dla użytkowników i ostatecznie można je również uznać za zły UX. Aby pozbyć się tego problemu, prawie wszystkie duże firmy używają wieloetapowych formularzy, które są podzielone na sekcje i strony.

Pasek postępu na górze strony zapewnia użytkownikom większą wygodę i kontrolę nad wypełnianiem formularza, a co najważniejsze, zapewnia inny smak interakcji z użytkownikami. Co więcej, szybko zwiększa Twoje zaangażowanie z użytkownikami.

Jak stworzyć wielostronicowy formularz WordPress z WP Fluent Form?

Będę tutaj używał WP Fluent Form, abyś zrozumiał. WP Fluent Form to szybko rozwijająca się, przyjazna dla użytkownika wtyczka do formularzy WordPress do tworzenia wszelkiego rodzaju formularzy.

Przede wszystkim musisz zainstalować i aktywować wtyczkę WP Fluent Form w WordPressie. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki WP Fluent Forms i zakończeniu procesu licencjonowania będziesz mieć wygodne środowisko do tworzenia wieloetapowego formularza na swojej stronie internetowej.

Myślę, że zamierzasz stworzyć trzyetapowy wieloetapowy formularz, tak jak ja teraz robię. Pierwszy krok to informacje osobiste użytkownika, druga strona to informacje edukacyjne użytkownika, a trzecia strona poświęcona jest jego hobby. Teraz pokażę Ci, jak to zrobić za pomocą WP Fluent Form.

WP Fluent Forms oferuje ponad 60 wbudowanych gotowych szablonów formularzy. Możesz użyć dowolnego z nich za pomocą jednego kliknięcia, aby służył odpowiedniemu celowi. Gdy skończysz z kliknięciem, zobaczysz, że odpowiedni formularz został utworzony automatycznie.

Możesz także tworzyć formularze ręcznie od podstaw. Aby utworzyć formularz od zera, po prostu przejdź do opcji Fluent Form —> Create a Blank Form , wyświetli się okno dialogowe z trzema domyślnymi formatami formularzy i niestandardową opcją tworzenia nowego formularza.

Aby uzyskać więcej informacji, zobacz, jak utworzyć nowy formularz za pomocą formularzy Fluent Forms.

Gdy skończysz z kliknięciem Utwórz pusty formularz , znajdziesz narzędzie do tworzenia formularzy, które pojawi się z opcjami konfiguracji. Z prawego paska bocznego znajdziesz pola wprowadzania, które można przeciągać i upuszczać, aby dodać konkretną funkcję do formularza.

Po utworzeniu formularza, teraz musisz umieścić w nim niezbędne pola. Aby było to możliwe, przeciągnij i upuść żądane pola; na przykład, aby uzyskać informacje osobiste od Ciebie, umieścisz w formularzu cztery różne pola.

Masz pola wejściowe, teraz musisz kliknąć lub przeciągnąć i upuścić dowolne pole wejściowe, aby dodać dowolną funkcję do formularza. Po dodaniu dowolnego pola wejściowego zmień Etykietę elementu dla każdej części zgodnie z żądaną nazwą. Zostawiam kilka zrzutów ekranu dla lepszego zrozumienia.

Dodaj pola nazw, pola adresowe , e- maile zgodnie z potrzebami. Możesz dostosować wszystkie pola wejściowe i zmienić ich etykietę pola administratora, symbol zastępczy, etykietę elementu itp.

Dodaję pole wejściowe rozwijane do edytora przed polem Adres i nadaję mu nazwę Płeć . W sekcji Płeć musisz skonfigurować opcje menu rozwijanego.

Możesz także zmienić kolejność pól wejściowych, po prostu przeciągając i upuszczając. Jak widać na poniższym obrazku, przeciągam i upuszczam pole wejściowe Płeć .

Dodaj pole wejściowe Krok formularza , w którym chcesz zakończyć pierwszy krok formularza. Spowoduje to utworzenie podziału strony w formularzu wieloetapowym. Dodaj inne pola poniżej, aby pojawiły się na następnej stronie.

Teraz umieść kursor nad sekcją Rozpoczęcie stronicowania , wtedy znajdziesz opcję Edytuj (ikona ołówka). Kliknij na niego, a zostaniesz przeniesiony do opcji Input Customization . Tam musisz nadać tytuł każdemu krokowi, klikając przycisk Pasek postępu .

Zapisz nazwę tytułu dla każdego kroku. Na przykład wpisz informacje osobiste w polu wejściowym kroku 1 . Wpisz Edukacja w polu wejściowym Krok 2 i tak dalej. Teraz spójrz na sekcję podglądu.

Rysunek pokazuje, że jeden pasek postępu i jeden przycisk Dalej jako wskaźnik odpowiednio w górnej i dolnej części formularza.

Teraz musisz popracować nad drugą stroną formularza, która wskazuje część edukacyjną formularza. W tym celu możesz użyć pola Prosty tekst dla University & College do wprowadzania danych. Musisz użyć pola rozwijanego do wprowadzania w formularzu „Stopień”.

Rzućmy okiem na zrzut ekranu dla każdego pola wejściowego. W przypadku uniwersytetu i college'u musisz najpierw dostosować etykiety.

W przypadku pola wejściowego Stopień musisz użyć pola wejściowego Rozwijane . W takim przypadku musisz najpierw dostosować etykietę, a następnie podać opcje listy rozwijanej.

Teraz przejdziesz do trzeciej strony, która jest związana z hobby użytkownika. Aby tak się stało, musimy ponownie wybrać Krok formularza , aby zastosować do tego podejście.

Nowe pole wejściowe zostanie utworzone natychmiast po kliknięciu pola Krok formularza w sekcji Rozpoczęcie stronicowania . Zapisz nazwę tytułu trzeciego kroku, klikając opcję Edytuj w sekcji „Krok formularza”.

Zapisz tytuł, wpisując Hobby w polu wejściowym. Następnie przejdź do trzeciej części formularza. Możesz wybrać pole Prosty tekst dla każdego hobby.

Musisz go upuścić tuż nad przyciskiem Prześlij formularz .

W ten sposób możesz wziąć dwa dodatkowe pola Prosty tekst , aby uzyskać całkowity widok w trzeciej sekcji formularza. Następnie dostosuj „Etykietę elementu” za pomocą tekstu Hobby One .

Musisz dostosować pozostałe dwa pola odpowiednio o nazwach Hobby Two i Hobby Three . Następnie spójrz na podgląd tego interfejsu.

Na dole strony możesz podać pole Regulamin , aby zakończyć całą procedurę. Następnie możemy przyjrzeć się całemu procesowi składania formularza.

Teraz spójrz na ostateczny podgląd.

W ten sposób możesz stworzyć wieloetapowy formularz za pomocą WP Fluent Form. Jest to bardzo przydatne i skuteczne w pracy z WP Fluent Form , ponieważ zapewnia najwygodniejsze funkcje, tworząc wieloetapowy formularz służący do określonych celów.

Aby skorzystać z tej funkcji i tworzyć piękne, kompaktowe i intuicyjne wieloetapowe formularze, pobierz teraz dodatek WP Fluent Form Pro !

Zasubskrybuj nasz kanał YouTube, aby uzyskać porady i wskazówki dotyczące WordPressa. Śledź nas również na Twitterze i Facebooku.