Jak zbudować wieloetapowy formularz WordPress z paskiem postępu

Rifat Poradniki WordPress Jun 21, 2023

Stworzenie angażującego i przyjaznego dla użytkownika formularza jest istotnym aspektem sukcesu każdej witryny, zwłaszcza jeśli chodzi o gromadzenie wartościowych informacji lub generowanie leadów. Jednym ze skutecznych podejść do poprawy doświadczenia użytkownika i poprawy wskaźników wypełniania formularzy jest wdrożenie wieloetapowego formularza z paskiem postępu. Ten dynamiczny projekt formularza dzieli długie lub złożone procesy na łatwe do wykonania etapy, prowadząc użytkowników przez każdy etap, zapewniając jednocześnie jasne wskazanie ich postępów.

Jeśli jesteś użytkownikiem WordPress i chcesz włączyć tę potężną funkcję formularza do swojej witryny, jesteś we właściwym miejscu. W tym przewodniku przeprowadzimy Cię przez proces tworzenia wieloetapowego formularza z paskiem postępu, korzystając z wszechstronnych możliwości WordPress.

Wykorzystując elastyczność WordPressa i jego rozległy ekosystem wtyczek i narzędzi, możesz łatwo tworzyć i dostosowywać wieloetapowe formularze do swoich konkretnych wymagań. Niezależnie od tego, czy chcesz zbierać opinie użytkowników, gromadzić informacje o klientach, przeprowadzać ankiety, czy ułatwiać zakupy online, wieloetapowy formularz z paskiem postępu może znacznie poprawić wrażenia użytkownika i zwiększyć wskaźniki wypełniania formularzy.

Znaczenie formularza wieloetapowego

Formularze wieloetapowe zyskały znaczną popularność w projektowaniu i tworzeniu stron internetowych ze względu na ich skuteczność w zwiększaniu komfortu użytkowania i zwiększaniu współczynników konwersji. W przeciwieństwie do tradycyjnych formularzy jednostronicowych, formularze wieloetapowe dzielą złożone procesy na mniejsze, łatwiejsze w zarządzaniu sekcje, prowadząc użytkowników przez szereg kolejnych kroków.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Głównym powodem, dla którego formularze wieloetapowe stały się tak popularne, jest ich zdolność do zwiększania zaangażowania użytkowników i wskaźników ukończenia. Prezentując informacje w ustrukturyzowany i progresywny sposób, formy te zmniejszają przeciążenie poznawcze i sprawiają, że ogólne doświadczenie jest bardziej intuicyjne i przyjazne dla użytkownika. Użytkownicy zwykle czują się mniej przytłoczeni, gdy mają do czynienia z długim, zastraszającym formularzem, co skutkuje wyższymi wskaźnikami ukończenia i mniejszą liczbą porzucanych formularzy.

Ponadto wieloetapowe formularze dają doskonałą okazję do zebrania bardziej szczegółowych i dokładnych informacji od użytkowników. Dzięki podzieleniu formularza na logiczne sekcje, z których każda skupia się na określonych szczegółach, użytkownicy z większym prawdopodobieństwem udzielą dokładnych odpowiedzi i wypełnią cały formularz. Prowadzi to do lepszej jakości danych i umożliwia firmom podejmowanie bardziej świadomych decyzji na podstawie zebranych informacji.

Oprócz korzyści dla użytkownika, wieloetapowe formularze mogą znacząco wpłynąć na współczynniki konwersji. Dzieląc proces konwersji na mniejsze etapy, firmy mogą strategicznie umieścić przekonujące wezwania do działania (CTA) na końcu każdej sekcji. Takie podejście pozwala na lepsze targetowanie, ponieważ wezwania do działania można dostosować do postępów i intencji użytkownika. Ponadto, dostarczając pasek postępu lub wskaźnik, użytkownicy są motywowani do kontynuowania kolejnych kroków, zwiększając prawdopodobieństwo udanych konwersji.

Biorąc pod uwagę znaczenie formularzy wieloetapowych w poprawie doświadczenia użytkownika, zwiększeniu wskaźników ukończenia i poprawie współczynników konwersji, kluczowe jest, aby osoby zajmujące się tworzeniem stron internetowych, szczególnie w WordPress, posiadały wiedzę i umiejętności do tworzenia takich formularzy. Możliwość tworzenia wieloetapowych formularzy z paskami postępu w WordPress umożliwia programistom i właścicielom witryn optymalizację formularzy online, co skutkuje wyższym zadowoleniem użytkowników, zwiększoną liczbą konwersji i ostatecznie lepszymi wynikami biznesowymi.

Zbuduj formularz wieloetapowy z paskiem postępu w WordPress

Jeśli chodzi o tworzenie wieloetapowego formularza w WordPress, skorzystanie z jednej z dostępnych wtyczek WordPress jest najprostszym rozwiązaniem. Wśród wielu opcji WPForms wyróżnia się jako najlepsze narzędzie do pracy, co czyni go najlepszą wtyczką formularza kontaktowego WordPress na rynku.

Znany ze swojego przyjaznego dla początkujących podejścia, WPForms odcisnął już swoje piętno na ponad 5 milionach stron internetowych. Ta potężna wtyczka umożliwia bezproblemowe tworzenie formularzy WordPress do różnych celów, eliminując potrzebę kodowania. Niezależnie od tego, czy szukasz przyjaznych dla użytkownika formularzy rejestracyjnych, formularzy rejestracyjnych, formularzy ankiet, formularzy przesyłania plików, formularzy zamówień lub formularzy zgłoszeniowych, WPForms zapewni Ci ochronę.

Dzięki intuicyjnemu kreatorowi formularzy typu „przeciągnij i upuść” oraz szeregowi gotowych szablonów formularzy tworzenie niestandardowych formularzy staje się dziecinnie proste. Co więcej, WPForms oferuje wygodne dodatki do popularnych procesorów płatności, takich jak Stripe i PayPal, umożliwiając bezproblemową akceptację płatności w Twoim sklepie WooCommerce.

Ponadto WPForms bezproblemowo integruje się z wiodącymi wtyczkami do tworzenia stron WordPress, takimi jak Elementor, Divi i SeedProd. Zapewnia to bezproblemowe wyświetlanie formularza w interfejsie Twojej witryny, eliminując potrzebę ręcznego kodowania lub CSS.

Podczas gdy darmowa wersja WPForms wystarcza do podstawowych formularzy kontaktowych, wersja WPForms Pro odblokowuje zaawansowane funkcje. Uaktualniając do WPForms Pro, zyskujesz dostęp do funkcji, takich jak logika warunkowa, formularze ankiet, zaawansowane szablony formularzy i, co najważniejsze, formularze wieloetapowe—niezbędne dla naszego samouczka.

W tym przewodniku wykorzystamy wersję WPForms Pro , wyposażoną we wszystkie niezbędne narzędzia do bezproblemowego tworzenia wieloetapowych formularzy w WordPress.

Utwórz nowy formularz wieloetapowy w WordPress

Po pomyślnym zainstalowaniu wtyczki WPForms możesz łatwo uzyskać dostęp do jej funkcji, przechodząc do sekcji WPForms » Dodaj nowy na pulpicie nawigacyjnym WordPress. Ta czynność spowoduje natychmiastowe wyświetlenie strony szablonów formularzy, oferując wybór różnych typów formularzy do wyboru.

Podział dowolnego formularza na formularz wieloetapowy można łatwo osiągnąć za pomocą wtyczki WPForms. Aby przybliżyć ten proces, skupimy się na przekształceniu formularza kontaktowego.

Rozpocznij od nadania nazwy nowo utworzonemu formularzowi, a następnie przejdź do wyboru szablonu „Prosty formularz kontaktowy”.


Po wybraniu WPForms rozpocznie ładowanie wyznaczonego szablonu do intuicyjnego narzędzia do tworzenia formularzy typu „przeciągnij i upuść”.

Po obserwacji staje się oczywiste, że podstawowy formularz kontaktowy zawiera już pola formularza dla Imię i nazwisko, E-mail oraz Komentarz lub Wiadomość. Korzystając z funkcji „kliknij, przeciągnij i upuść”, możesz dowolnie modyfikować kolejność tych pól zgodnie z własnymi preferencjami.

Ponadto proces uzupełniania formularza o dodatkowe pola tekstowe przebiega bezproblemowo. Można to osiągnąć, korzystając z lewego panelu, aby wybrać żądane pole tekstowe, a następnie umieścić je po prawej stronie formularza. Wyznaczenie pól obowiązkowych można uzyskać, wybierając pole i dostosowując odpowiednie ustawienia.

Po ustaleniu układu i zaznaczeniu pól prosimy o zapisanie zmian i przejście do kolejnego kroku.

Podziel swój formularz na wiele kroków

Aby podzielić formularz na odrębne etapy, konieczne jest zastosowanie pola formularza Page Break.

W tym celu przejdź do sekcji Pola fantazyjne znajdującej się w panelu po lewej stronie i przejdź do pola Podział strony. Następnie przeciągnij wybrane pole w wybrane miejsce w formularzu.

Aby podzielić formularz w określonym miejscu, możesz strategicznie umieścić podział strony.

Postępuj zgodnie z powyższą procedurą, aby zaimplementować żądane podziały stron w formularzu. Następnie możesz rozszerzyć te odpowiednie sekcje, dodając dodatkowe pola, aby zakończyć proces tworzenia formularza.

WPForms zapewnia elastyczność generowania wielu stron formularzy zgodnie z Twoimi wymaganiami. Niemniej jednak zaleca się zachowanie dyskrecji i unikanie zalewania odwiedzających witrynę nadmierną liczbą sekcji formularza. Zaleca się, aby wnioski zawierały tylko niezbędne informacje, ponieważ wszelkie dodatkowe szczegóły można zebrać później na późniejszym etapie.

Dostosuj swoją wielostronicową stronę z paska postępu

Aby spełnić określone wymagania Twojej firmy i witryny, możesz rozważyć wprowadzenie paska postępu w swoich formularzach. Wskaźniki postępu służą do informowania użytkowników na jakim etapie znajdują się w formularzu oraz szacowania czasu pozostałego do jego wypełnienia.

Wyświetlając postępy użytkownikom, zapewniasz im wizualną reprezentację ich zaawansowania, co może znacząco zmotywować ich do sfinalizowania i wysłania formularza. Podejście to skutecznie odnosi się do powszechnej skłonności jednostek do unikania niedokończenia zadań.


WPForms oferuje trzy różne paski postępu, które można włączyć do wieloczęściowego formularza. Opcje te obejmują:

  1. Łączniki: ten styl przypomina pasek nawigacyjny, który wizualnie łączy różne sekcje formularza za pomocą serii pasków wyświetlających odpowiednie tytuły stron.
  2. Kręgi: Ta alternatywa zawiera pojedyncze kręgi, z których każdy jest oznaczony tytułem odpowiedniego etapu formularza. Użytkownicy mogą łatwo śledzić swoje postępy, obserwując wypełnione kółka.
  3. Pasek postępu: W przypadku tej opcji częściowo kolorowy pasek jest używany do zilustrowania postępów użytkowników w formularzu. Ta dynamiczna pomoc wizualna zapewnia wyraźne wskazanie ich aktualnej pozycji.

Aby włączyć i dostosować pasek postępu w wieloetapowym formularzu, po prostu kliknij sekcję Podział pierwszej strony. Stamtąd możesz uzyskać dostęp do niezbędnych ustawień, aby zmodyfikować jego wygląd zgodnie z własnymi preferencjami.

Po uzyskaniu dostępu do konstruktora formularzy pojawi się nowy panel, w którym możesz wybrać preferowany styl i kolor wskaźnika postępu.

W przypadku, gdy wybierzesz styl wskaźnika postępu Connectors lub Circles, będziesz mieć możliwość modyfikacji tytułu strony, wskazując tym samym użytkownikom, na jakim etapie formy się aktualnie znajdują.

Alternatywnie styl paska postępu zapewnia konwencjonalny pasek postępu, który prowadzi użytkowników przez pozostałe kroki wymagane do wypełnienia formularza.

Aby spersonalizować tytuł następnej strony oraz przycisk Dalej, który kieruje użytkowników do kolejnej sekcji formularza, wystarczy kliknąć sekcję Podział strony, która została wstawiona podczas początkowej konfiguracji formularza. Opcje dostosowywania zostaną wyświetlone w lewym panelu konstruktora formularzy.


W celu zapewnienia użytkownikom możliwości przejścia do poprzedniej strony możliwe jest włączenie przycisku „Poprzednia”. Można to osiągnąć, aktywując pole wyboru „Wyświetl poprzednie”, a następnie dostosowując tytuł przycisku do własnych preferencji.

Po zadowalającym zakończeniu umieszczania podziałów stron i wskaźników postępu zaleca się kontynuowanie, wybierając przycisk „Zapisz”.

Skonfiguruj ustawienia formularza wieloetapowego

W tej konkretnej fazie przeanalizujemy opcje konfiguracji Twojego formularza wieloczęściowego. Najpierw kontynuuj, klikając kartę „Ustawienia”, a następnie wybierając opcję „Ogólne”.

W ramach tego interfejsu masz możliwość przypisania nowej nazwy i podania opisu formularza. Ponadto możliwe jest również dostosowanie przycisku wysyłania wraz z opcją aktywacji funkcji antyspamowych, takich jak Google Recaptcha.

Dodatkowo masz możliwość włączenia ustawień AJAX i wyłączenia przechowywania informacji w celu zapewnienia zgodności z przepisami RODO.

Po zadowalającym dostosowaniu żądanych ustawień pamiętaj, aby zapisać zmiany, klikając przycisk „Zapisz”.

Skonfiguruj powiadomienia formularzy

Przejdź do sekcji Powiadomienia znajdującej się po lewej stronie strony ustawień w WordPress. W tej sekcji znajdziesz opcje konfiguracji powiadomień dla wielostronicowego formularza.

Powiadomienia odnoszą się do wiadomości e-mail, które są wysyłane do Ciebie za każdym razem, gdy użytkownicy przesyłają formularz w Twojej witrynie. Domyślnie WPForms włącza powiadomienia. Jeśli jednak wolisz nie otrzymywać powiadomień e-mail, możesz wybrać opcję „Wyłączone” z menu rozwijanego.

Ponadto masz możliwość korzystania z inteligentnych tagów, które umożliwiają wysyłanie wiadomości e-mail na adres e-mail podany przez każdego użytkownika po przesłaniu formularza. Ta funkcja może być korzystna w zapewnianiu użytkowników, że ich odpowiedzi zostały otrzymane. Szczególnie w przypadku formularzy wieloetapowych użytkownicy mogą bardzo docenić to potwierdzenie, ponieważ eliminuje ono wszelką niepewność co do tego, czy przesłanie formularza powiodło się.

Po skonfigurowaniu żądanych powiadomień formularza pamiętaj, aby kliknąć przycisk Zapisz, aby zastosować zmiany.

Wiadomość potwierdzająca

Kolejny krok to wybór komunikatów potwierdzających dla formularza wieloetapowego. Aby uzyskać dostęp do opcji, przejdź do strony Ustawienia i kliknij nagłówek Potwierdzenia.

Potwierdzenia formularzy służą do informowania użytkowników, że wysłanie formularza zakończyło się pomyślnie, oraz dostarczają instrukcji dotyczących kolejnych działań, które muszą podjąć.

W ramach WPForms istnieją trzy dostępne typy potwierdzeń:

  1. Wiadomość: jest to domyślny typ potwierdzenia, który wyświetla prosty komunikat o powodzeniu po przesłaniu formularza przez użytkownika.
  2. Pokaż stronę: Korzystając z tego typu potwierdzenia, użytkownicy zostaną przekierowani na inną stronę w Twojej witrynie, na przykład stronę z podziękowaniami.
  3. Przejdź do adresu URL (przekierowanie): Korzystając z tego komunikatu potwierdzającego, możesz przekierować użytkowników do strony w witrynie innej niż Twoja.

Teraz przejdź do wyboru preferowanego typu potwierdzenia z podanego menu rozwijanego i dostosuj go, dodając żądaną wiadomość lub adresy URL.

Gdy jesteś zadowolony z wyglądu i ustawień, kliknij przycisk Zapisz.

Dodaj formularz wieloetapowy do WordPress

Po utworzeniu wieloetapowego formularza następnym krokiem jest włączenie go do witryny WordPress. WPForms oferuje elastyczność dodawania formularza do różnych sekcji witryny, takich jak strona, post, pasek boczny, a nawet w motywie WordPress za pomocą krótkiego kodu.

Najczęściej stosowanym podejściem jest osadzenie formularza w poście lub stronie WordPress. Przyjrzyjmy się teraz procesowi osiągania tego.

Aby rozpocząć, utwórz nowy post lub stronę w WordPress lub wybierz istniejący i kliknij opcję „Edytuj”. Gdy znajdziesz się w edytorze WordPress, kliknij ikonę plusa (+), aby dodać nowy blok treści.

Przewiń menu podręczne w dół, aż dojdziesz do sekcji „Widżety”, a następnie kliknij widżet WPForms, aby osadzić blok w WordPress.

Następnie kliknij menu rozwijane i wybierz żądany formularz wieloetapowy.

WPForms przedstawi formularz w edytorze WordPress, umożliwiając podgląd jego wyglądu przed opublikowaniem.

Na koniec kliknij „Publikuj” lub „Aktualizuj”, aby opublikować formularz. Oto przykład, jak będzie wyświetlany użytkownikom:

Podsumowanie


Formularze wieloetapowe okazały się skutecznym sposobem na zwiększenie konwersji formularzy w obszarze WordPress. Dzieląc formularz na odrębne etapy, użytkownicy otrzymują bardziej przystępne i łatwe w obsłudze doświadczenie, zmniejszając w ten sposób poczucie przytłoczenia i zwiększając prawdopodobieństwo wypełnienia formularza. Badania empiryczne wykazały znaczną poprawę współczynników konwersji dzięki wdrożeniu formularzy wieloetapowych, zwłaszcza gdy formularz obejmuje więcej niż trzy pola.

Podsumowując, ufamy, że ten artykuł wyposażył Cię w wiedzę niezbędną do tworzenia wieloetapowych formularzy w WordPress. Jeszcze bardziej niezwykłe jest to, że możesz to osiągnąć bez konieczności zagłębiania się w jedną linię kodu! WPForms , znana wtyczka WordPress, zapewnia przyjazną dla użytkownika platformę do bezproblemowego generowania wieloetapowych formularzy, dzięki czemu proces jest jeszcze bardziej płynny i wygodny.

Divi WordPress Theme