Jak dodać formularz wieloetapowy w WordPress w 5 prostych krokach

Czy wiedziałeś o tym konwersja jednoetapowego formularza WordPress na wieloetapowy formularz WordPress może zwiększ swoje konwersja o prawie 60%? W rzeczywistości w niektórych przypadkach współczynnik konwersji może osiągnąć nawet 300%.

Tak. Ponieważ w dzisiejszych czasach ludzie są zbyt zajęci i mają krótki czas uwagi. Co więcej, jeśli poprosisz ich o wypełnienie jednoetapowego, długiego formularza, najprawdopodobniej opuszczą Twoją witrynę, pozostawiając formularz niekompletny.

Możesz jednak zmienić ten scenariusz, korzystając z wieloetapowego formularza dla swojej witryny WordPress. Ale pytanie brzmi: jak? 

Cóż, dlatego tu jestem, żeby ci pokazać przewodnik krok po kroku, jak dodać formularz wieloetapowy w WordPress.

Czytaj dalej, aby dowiedzieć się, jak łatwo utworzyć wieloetapowy formularz na stronie WordPress w ciągu zaledwie kilku minut….

Co to jest formularz wieloetapowy?

Cóż, jak sama nazwa wskazuje, jest to formularz składający się z wielu kroków, w którym pytania/pola wejściowe są podzielone na różne kroki, zamiast umieszczać wszystko w jednym kroku. Jeśli szukasz definicji, oto jak to zrobić HubSpot definiuje formę wieloetapową.

Formularz wieloetapowy to długi formularz podzielony na wiele części. Używa się ich, aby długie formy były mniej zastraszające i zniechęcające.

– Punkt centralny

Formularze wieloetapowe w zasadzie zastępują długie formularze ze zbyt dużą liczbą pól wejściowych. Jeśli masz stosunkowo mniejszy formularz, możesz trzymać się formularza jednoetapowego.

Teraz, gdy już wiesz, czym jest formularz wieloetapowy, przyjrzyjmy się niektórym powodom, dla których warto rozważyć dodanie formularza wieloetapowego do swojej witryny WordPress.

Dlaczego warto używać formularza wieloetapowego w WordPress?

Cóż, prosta odpowiedź brzmi: gwałtownie zwiększyć współczynnik konwersji. Formularze wieloetapowe stają się obecnie niezwykle popularne na stronach internetowych, w których znajdują się takie zastosowania, jak formularze rejestracyjne, formularze rezerwacji, formularze zamówień jedzenia itp. Oto niektóre z powodów, dla których warto rozważyć użycie formularza wieloetapowego w swojej witrynie:

• Formularze wieloetapowe sprawdzają się lepiej, jeśli chodzi o przyciągnięcie uwagi użytkownika. W rezultacie ludzie bardziej się angażują i częściej wypełniają formularze.
• Użytkownicy uważają, że wieloetapowy formularz jest bardziej przyjazny dla użytkownika i zapewnia większą łatwość użycia niż długi, jednoetapowy formularz.
• Ponieważ formularz wieloetapowy zawiera pasek nawigacyjny/pasek postępu, użytkownicy są bardziej zachęcani do wypełnienia formularza wieloetapowego.
• Formularze warunkowe wieloetapowe doskonale nadają się do gromadzenia tylko potrzebnych danych.
• Dzięki wszystkim wymienionym powyżej zaletom, wieloetapowe formy zwiększają współczynnik konwersji.

Teraz, gdy wiesz, że powinieneś używać formularzy wieloetapowych w witrynie WordPress, czas stworzyć idealną konfigurację potrzebną do zbudowania formularza wieloczęściowego.

Skonfiguruj, musisz zbudować wieloetapowy formularz WordPress

Oprócz WordPressa potrzebne będą jeszcze dwie wtyczki, aby z łatwością tworzyć wieloetapowe formularze w WordPressie. Te wtyczki WordPress to:

1. Elementora (Darmowa wersja)
2. MetForm (bezpłatny i profesjonalny)

Elementor to najlepszy narzędzie do tworzenia stron WordPress, a MetForm to jedna z najszybciej rozwijających się wieloetapowych wtyczek formularzy WordPress. Jeśli potrzebujesz pomocy w instalacji MetForm, możesz zapoznać się z naszą dokumentacją na temat jak zainstalować MetForma.

Po zakończeniu instalacji musisz utworzyć stronę za pomocą narzędzia do tworzenia stron Elementor, zanim będziesz mógł korzystać z Metform. W tym celu przejdź do Panel ⇒ Strona ⇒ Dodaj nowy.

Teraz podaj odpowiedni Tytuł, Wybierać Pełna szerokość Elementora jako szablon, Kliknij PublikujH. Następnie kliknij Edytuj za pomocą Elementora.

Wreszcie możesz przystąpić do tworzenia wieloetapowego formularza. Przejdźmy więc do głównego procesu.

Notatka: W tym samouczku pokażę Ci, jak dodać wieloetapowy formularz do strony. Ale możesz też łatwo dodawaj formularze zbudowane za pomocą MetForm w modalnym wyskakującym okienku.

Jak utworzyć formularz wieloetapowy w WordPress

Na tym blogu nauczysz się od podstaw tworzyć nowocześnie wyglądający, wieloetapowy formularz w zaledwie 5 prostych krokach:

Krok 1: Przeciągnij i upuść MetForm 

Gdy już wejdziesz Edytuj za pomocą Elementora tryb, szukaj dla MetForm i przeciągnij i upuść w miejscu, w którym chcesz, aby formularz się pojawił. 

Krok 2: Utwórz nowy formularz

Kliknij sekcję formularza, aby przejść do Edytuj MetForm opcje. Kliknij na Edytuj formularz Przycisk.

Po pojawieniu się nowego okna wyskakującego

• Wybierz Nowy (utwórz nowy formularz)
• Podaj formularz nazwa dla formularza
• Wybierz pusty szablon, 
• i kliknij Edytuj formularz

Krok 3: Zbuduj wieloetapowy formularz od podstaw, korzystając z narzędzia MetForm i narzędzia do tworzenia stron Elementor

Po kliknięciu Edytuj formularz uzyskasz dostęp do kolejnego nowego okna z narzędziem do tworzenia stron Elementor, w którym możesz utworzyć formularz od zera. Do zbuduj jeden pojedynczy krok wieloetapowej formy, musisz wykonaj te cztery kroki:

✅ Dodaj zupełnie nową sekcję

✅ Przeciągnij i upuść pola wejściowe zgodnie z wymaganiami

✅ Przeciągnij i upuść przycisk Poprzedni/Dalej/Wyślij w zależności od frazy formularza

✅ Podaj poprawną nazwę sekcji

Na potrzeby tego bloga utworzę wersję demonstracyjną 3-etapowego wieloetapowego formularza rezerwacji hotelu, korzystając z kroków wymienionych powyżej. Trzy etapy formularza będą obejmować dane osobowe, informacje o rezerwacji i informacje dodatkowe

1️⃣ Formularz rezerwacji Krok pierwszy – Dane osobowe:

• W sekcji Dane osobowe kliknij przycisk Elementora + Ikona i wybierz konstrukcja z dwoma równymi kolumnami.

• Wyszukaj tekst pole wejściowe, a następnie przeciągnij i upuść pole formularza w lewej kolumnie.

• Teraz, aby edytować atrybut tego pola wejściowego, kliknij znak edycji i przejdź do Treść ⇒ treść i edytuj następujące opcje:
  • Pokaż etykietę: Włącz tę opcję, aby wyświetlić etykietę pola wejściowego. 
  • Pozycja:  Możesz umieścić etykietę na górze lub po lewej stronie.
  • Etykieta: Nadaj nazwę swojej etykiecie. Będę używał słowa „Imię”. 
  • Nazwa:  Pole nazwy jest wymagane i musi być unikalne. Dlatego pamiętaj, aby nadać każdemu polu inną nazwę i zastąpić spację podkreśleniem/łącznikiem.
  • Symbol zastępczy: Podaj tekst zastępczy.
  • Tekst pomocy: Jeśli chcesz udostępnić użytkownikom tekst pomocy, możesz to zrobić tutaj.

• Następnie przejdź do Treść ⇒ Ustawienia  aby zmodyfikować następujące opcje:
  • Wymagany:  Aby to pole formularza było wymagane, włącz tę opcję.
  • Typ walidacji: Można ustawić różne typy sprawdzania poprawności pola tekstowego w oparciu o długość znaku, długość słowa i wyrażenie.
  • Wiadomość ostrzegawcza: Tutaj możesz ustawić komunikat ostrzegawczy, który pojawi się, jeśli wymaganie nie zostanie spełnione.

Notatka:  skorzystam z logika warunkowa funkcji w drugim kroku tego formularza.

Podobnie jak w przypadku imienia, dodaj kolejne pole wprowadzania tekstu dla nazwiska. W ramach kroku dotyczącego danych osobowych dodam tutaj jeszcze dwa pola; E-mail i numer telefonu komórkowego.

Po zakończeniu modyfikowania ustawień pól Adres e-mail i Numer telefonu komórkowego. Wyszukaj i przeciągnij i upuść przycisk Następny krok. Możesz zmienić różne ustawienia przycisków, takie jak etykieta, wyrównanie przycisku, ikona, pozycja ikony itp.

• Sekcja dotycząca pierwszego kroku jest już gotowa, aby nadać mu właściwą nazwę
  • Kliknij ikonę sześciu kropek, aby otworzyć opcję ustawień i przejść do układ ⇒ wieloetapowy.  
  • Podaj nazwę na Tytuł karty wieloetapowej opcja
  • Wybierz ikonę z biblioteki lub prześlij plik SVG.
  • Kliknij aktualizację, aby zapisać.

Teraz, gdy pierwsza sekcja jest już gotowa, zbudujmy drugi krok.

2️⃣ Formularz rezerwacji Krok drugi – Informacje o rezerwacji:

• W drugim kroku musisz wybrać nową sekcję. Mam zamiar wybrać nową sekcję z pojedynczą kolumną, a następnie dodać nową sekcję wewnętrzną z dwiema równymi kolumnami. 
• Po wybraniu kolumny przeciągnij i upuść pole wprowadzania 2 dat dla opcji zameldowania i wymeldowania.

Zasada, której należy przestrzegać: Musisz wybierz nową sekcję, aby rozpocząć nowy krokw przeciwnym razie każde dodane pole wejściowe zostanie dodane do poprzedniego kroku. Więc zawsze pamiętaj, nowe kroki wymagają nowej sekcji nawet jeśli ma ten sam układ.

• Oprócz wspomnianej opcji ustawień pola tekstowego, dostępne są następujące ustawienia pola wprowadzania daty Treść ⇒ Ustawienia
  • Ustaw bieżącą datę jako datę minimalną: Włącz tę opcję, aby ustawić bieżącą datę jako datę minimalną.
  • Ustaw minimalną datę ręcznie: Jeśli nie chcesz ustawiać bieżącej daty jako daty minimalnej, możesz również ustawić datę minimalną ręcznie.
  • Ustaw maksymalną datę ręcznie:  Tutaj możesz ustawić maksymalną datę.
  • Wyłącz listę dat: Możesz użyć tej opcji, aby wyłączyć niektóre daty. Aby wyłączyć dowolną datę, kliknij przycisk +DODAJ ELEMENT i wybierz datę.
  • Zakres wprowadzania dat: Włączając tę opcję, możesz umożliwić użytkownikom wybór zakresu dat. Ale w przypadku tego formularza pozostawię tę opcję wyłączoną. 
  • Rok wprowadzenia: Włącz tę opcję, aby przy wprowadzaniu daty uwzględniać rok.
  • Dane miesiąca: Aby włączyć miesiąc jako część wprowadzania daty, włącz tę opcję.
  • Wprowadzanie daty: Włącz tę opcję, aby podczas wprowadzania daty uwzględniać datę (dzień).
  • Format daty: Ustaw tutaj format wprowadzania daty.
  • Lokalizacja: Wybierz lokalizację z listy rozwijanej w oparciu o swoje preferencje.
  • Chcesz wprowadzić za jego pomocą czas: Włącz tę opcję, aby uwzględnić czas na wprowadzaniu danych. Jeśli włączysz tę opcję, otrzymasz inną opcję, czyli Włącz czas 24-godzinny. Korzystając z tej opcji, możesz włączyć format 24-godzinny.

Teraz na koniec skorzystamy z funkcja formularza warunkowego dla pola Wyewidencjonuj. Aby pole wymeldowania było widoczne tylko wtedy, gdy pole odprawy jest puste,  

• Skopiuj wartość nazwy w polu wejściowym Zameldowanie.
• Następnie przejdź do Treść ⇒ Warunkowa, włącz włączać opcja
• Wybierz ORAZ z listy rozwijanej Kryteria dopasowania warunku.
• Z rozwijanych opcji akcji wybierz Pokaż to pole.
• Kliknij + DODAJ ELEMENT, w polu wejściowym if wklej skopiowaną wartość nazwy pola meldowania.
• Wybierać "nie pusty” z listy rozwijanej Dopasuj (porównanie).

Teraz kliknij przycisk podglądu, aby zobaczyć. Pole wymeldowania powinno być widoczne dopiero po wybraniu daty zameldowania.

Dodaj nową sekcję wewnętrzną więc formularz nie wygląda źle, gdy opcja warunkowa początkowo ukrywa sprawdzenie. Przeciągnij i upuść dwukrotnie pole formularza Numer aby utworzyć dwa dodatkowe pola na liczbę pokoi i liczbę osób.

A ponieważ jest to środkowy krok, musimy to zrobić zawierać zarówno przyciski Poprzedni, jak i Następny.

Po zakończeniu edycji ustawień wszystkich dodanych pól w tej sekcji zmień nazwa sekcji/kroku z układu ⇒ wieloetapowy tak jak zrobiłeś to z pierwszą sekcją. Nazywam to Informacje o rezerwacji.

Teraz drugi krok jest gotowy, przejdźmy do trzeciego kroku

3️⃣  Formularz rezerwacji Krok trzeci – Informacje dodatkowe

W trzecim kroku dodajmy nową sekcję z pojedynczą kolumną. Dodaj pole tekstowe i nazwij je Informacje dodatkowe.

Następnie dodaj wewnętrzną sekcję dwukolumnową w obrębie sekcji. Po tym, przeciągnij i upuść przycisk Wstecz, a następnie przycisk Prześlij do przesłania formularza.

Uwaga: możesz dodać dowolną liczbę sekcji wewnętrznych. Aby jednak utworzyć nowy krok, musisz dodać nową sekcję.

Aby nadać nazwę trzeciej sekcji, przejdź do układ ⇒ wieloetapowy i dodaj tytuł „Dodatkowe informacje” i dodaj ikonę.

W końcu skończyliśmy budować nasz wieloetapowy formularz WordPress w 3 krokach. Teraz kliknij aktualizację, aby zapisać i zamknąć okno, aby przejść do ustawień wieloetapowych.

Krok 4: Włącz opcję formularza wieloetapowego w MetForm

Skoro mamy już formularz, czas go przekonwertować na działający, wieloetapowy formularz. Aby to zrobić

• Przejdź do Treści ⇒ Ustawienia wieloetapowe
• Włącz opcję Włącz opcję Wieloetapową, aby aktywować opcje wieloetapowe
• Włącz opcję Wyświetl wieloetapową nawigację, aby menu Sekcja wyświetlało się na górze. Możesz także edytować różne ustawienia, takie jak wysokość kontenera formularza adaptacyjnego, opcję Włącz przewijanie do góry itp.
• Po wprowadzeniu wszystkich zmian kliknij aktualizację, aby zapisać

Krok 5: Skonfiguruj potwierdzenie, powiadomienie i inne ustawienia, aby zakończyć

Teraz, gdy zaprojektowałeś swój wieloetapowy formularz. Skonfigurujmy wszystkie ustawienia formularza, które MetForm ma do zaoferowania. Aby zmodyfikować ustawienia MetForm z panelu WordPress, przejdź do MetForm ⇒ Formularze ⇒ Kliknij Edytuj opcja formularza, który właśnie utworzyłeś. 

Notatka:  Tutaj znajdziesz także krótki kod formularza który utworzyłeś, a który wystarczy skopiować i wkleić, aby dodać formularz w dowolnym miejscu witryny. Dostęp do ustawień formularza można uzyskać z poziomu Edytuj Formularz opcja również.

Tutaj znajdziesz następujące ustawienia:

Ogólny: 

W ramach ustawień ogólnych możesz dokonać modyfikacji Tytuł, wiadomość o powodzeniu, wymagane logowanie, liczba wyświetleńitp. Możesz także ustawić dowolne Niestandardowy adres URL chcesz, aby użytkownicy trafili po przesłaniu formularza.

Potwierdzenie:

Za pomocą tej wtyczki do tworzenia formularzy możesz wysłać użytkownikom wiadomość e-mail z potwierdzeniem wraz z kopią przesłanego formularza. Włącz opcję potwierdzenia i wtedy możesz ustawić Temat wiadomości e-mail, Wiadomość e-mail od, Z wiadomości e-mail, Odpowiedź e-mail do i Wiadomość z podziękowaniami.

Ustawienia powiadomień:

Za pomocą MetForm możesz także wysyłać e-maile z powiadomieniami o formularzach do administratora. Włącz pocztę z powiadomieniami do opcji administratora. Następnie ustaw Temat wiadomości e-mail, wiadomość e-mail do, wiadomość e-mail od, uwaga administratoraitp.

Po dokonaniu wszystkich zmian przewiń w dół i kliknij Zapisz zmiany, aby zaktualizować ustawienia.

Oprócz ustawień, które opisałem na tym blogu, otrzymasz także integrację, taką jak API REST, Mail Chimp, Arkusz Googleitp. Ponadto, integracja bramek płatniczych, takich jak PayPal, Stripe. Integracja z CRM obejmująca HubSpot, Zoho, itp. Ty też dostajesz opcje uwierzytelniania, takie jak logowanie i rejestracja. Aby uzyskać więcej informacji na temat tych ustawień, sprawdź nasze dokumentacja MetForma.

Jeśli wykonałeś prawidłowo wymienione kroki, powinieneś otrzymać wieloetapowy formularz rezerwacji, taki jak ten poniżej:

Zakończyć

Tam właśnie utworzyłeś wieloetapowy formularz WordPress w ciągu kilku minut. Jeśli uważasz, że ten formularz jest prosty, nie martw się. Głównym celem tego bloga było pokazanie, jak można utworzyć wieloetapowy formularz w WordPressie za pomocą MetForm.

Teraz, gdy wiesz, jak utworzyć wieloetapowy formularz WordPress, możesz stworzyć własny formularz i logikę. Mam nadzieję, że wykorzystasz funkcje MetForm do tworzenia wspaniałych, wieloetapowych formularzy. Jeśli po drodze napotkasz jakiekolwiek problemy, podziel się z nami, nasz zespół odpowie JAK NAJSZYBCIEJ.

Nie zapomnij sprawdzić wszystkich niesamowitych funkcji, jakie MetForm ma do zaoferowania.