Jak dodać formularz wieloetapowy do WordPressa w 5 prostych krokach

Czy wiesz, że konwersja Twojego jednoetapowego formularza WordPress na wieloetapowy formularz WordPress może zwiększyć konwersję 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 okres uwagi. Ponadto, jeśli poprosisz ich o wypełnienie jednoetapowego długiego formularza, najprawdopodobniej opuści Twoją witrynę, pozostawiając formularz niekompletny.

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

Cóż, dlatego jestem tutaj, aby pokazać Ci 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 z wieloma krokami, 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 HubSpot definiuje formularz wieloetapowy.

Formularz wieloetapowy to długa forma podzielona na wiele części. Służą do tego, aby długie formy były mniej onieśmielające i zniechęcające.

– Punkt centralny

Formularze wieloetapowe są w zasadzie substytutem długich formularzy ze zbyt dużą liczbą pól wejściowych. Jeśli masz stosunkowo mniejszą formę, możesz trzymać się formy jednoetapowej.

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

Dlaczego warto korzystać z formularza wieloetapowego w WordPress?

Cóż, najprostszą odpowiedzią jest podniesienie współczynnika konwersji. Formularze wieloetapowe stają się obecnie niezwykle popularne na stronach internetowych o takich zastosowaniach, jak formularze rejestracyjne, formularze rezerwacji, formularze zamówień żywności itp. Niektóre z powodów, dla których warto rozważyć użycie formularza wieloetapowego w witrynie, to:

• Formularze wieloetapowe działają 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 forma wieloetapowa jest bardziej przyjazna dla użytkownika i zapewnia lepszą łatwość użytkowania niż długa forma jednoetapowa.
• Ponieważ istnieje pasek nawigacji/pasek postępu z formularzem wieloetapowym, użytkownicy czują się bardziej zachęcani do wypełnienia formularza wieloetapowego.
• Warunkowe formularze wieloetapowe doskonale nadają się do zbierania tylko odpowiednich danych, których potrzebujesz.
• Wszystkie wymienione wyżej pozytywne strony powodują, że wieloetapowe formularze zwiększają współczynnik konwersji.

Teraz, gdy wiesz, że powinieneś używać formularzy wieloetapowych w witrynie WordPress, nadszedł czas na stworzenie idealnej konfiguracji potrzebnej do zbudowania formularza wieloczęściowego.

Skonfiguruj, musisz zbudować wieloetapowy formularz WordPress

Wraz z WordPressem potrzebujesz jeszcze dwóch wtyczek, aby z łatwością tworzyć wieloetapowe formularze w WordPressie. Te wtyczki do WordPressa to:

1. Elementor (Darmowa wersja)
2. MetForm (bezpłatny i Pro)

Elementor to najlepszy kreator stron WordPress, a MetForm to jedna z najszybciej rozwijających się wtyczek wieloetapowych formularzy WordPress. Jeśli potrzebujesz pomocy przy instalacji MetForm, możesz zapoznać się z naszą dokumentacją dotyczącą instalacji MetForm.

Po zakończeniu instalacji musisz utworzyć stronę za pomocą kreatora stron Elementor, zanim będziesz mógł korzystać z Metform. W tym celu przejdź do Dashboard ⇒ Page Add New .

Teraz podaj odpowiedni tytuł , wybierz elementor pełną szerokość jako szablon, kliknij opcję publikuj . Następnie kliknij Edytuj za pomocą Elementora.

Wreszcie jesteś gotowy do zbudowania swojego wieloetapowego formularza. Przejdźmy więc do głównego procesu.

Uwaga: w tym samouczku pokażę, jak dodać wieloetapowy formularz do strony. Ale możesz również łatwo dodawać formularze zbudowane za pomocą MetForm w wyskakującym okienku modalnym.

Jak stworzyć formularz wieloetapowy w WordPress

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

Krok 1: Przeciągnij i upuść MetForm

Po przejściu do trybu Edytuj za pomocą Elementora wyszukaj MetForm, a następnie przeciągnij i upuść w miejscu, w którym ma się pojawić formularz.

Krok 2: Utwórz nowy formularz

Kliknij sekcję formularza, aby przejść do opcji Edytuj MetForm . Kliknij przycisk Edytuj formularz .

Po pojawieniu się nowego okna

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

Krok 3: Zbuduj formularz wieloetapowy od podstaw za pomocą narzędzia MetForm i kreatora stron Elementor

Po kliknięciu Edytuj formularz uzyskasz dostęp do innego nowego okna z kreatorem stron Elementor, aby utworzyć formularz od podstaw. Aby zbudować jeden krok formularza wieloetapowego, musisz wykonać następujące cztery kroki:

Dodaj zupełnie nową sekcję

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

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

Podaj odpowiednią nazwę sekcji

Na potrzeby tego bloga stworzę demo 3 kroków do wieloetapowego formularza rezerwacji hotelowej, korzystając z kroków wymienionych powyżej. Trzy kroki formularza będą obejmować dane osobowe, informacje o rezerwacji i informacje dodatkowe

Formularz rezerwacji Krok pierwszy – Dane osobowe:

• W sekcji Dane osobowe kliknij ikonę Elementor + i wybierz strukturę z dwiema równymi kolumnami .

• Wyszukaj pole wprowadzania tekstu i przeciągnij i upuść pole formularza w lewej kolumnie.

• Teraz, aby edytować atrybut tego pola wejściowego, kliknij znak edycji, przejdź do Treść ⇒ zawartość i edytuj następujące opcje:
  • Pokaż etykietę: Włącz tę opcję, aby wyświetlić etykietę pola wejściowego.
  • Pozycja: możesz wybrać umieszczenie etykiety na górze lub na lewo.
  • Etykieta: Nadaj nazwę swojej etykiecie. Użyję „Imienia”.
  • Nazwa: pole Nazwa jest wymagane i musi być niepowtarzalne. Dlatego upewnij się, że każdemu polu nadałeś inną nazwę i zastąp 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:
  • Wymagane: Aby to pole formularza było wymagane, włącz tę opcję.
  • Typ walidacji: Możesz ustawić różne typy walidacji dla pola tekstowego na podstawie długości znaków, długości słowa i wyrażenia.
  • Komunikat ostrzegawczy: Tutaj możesz ustawić komunikat ostrzegawczy, który pojawi się, jeśli wymaganie nie zostanie spełnione.

Uwaga: użyję funkcji logiki warunkowej w drugim kroku tego formularza.

Podobnie jak w przypadku imienia, dodaj kolejne pole tekstowe dla nazwiska. W ramach kroku z danymi osobowymi dodam jeszcze dwa pola; E-mail i numer telefonu komórkowego.

Po zakończeniu modyfikowania ustawień pola E-mail i numer telefonu komórkowego. Wyszukaj, 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.

• Teraz sekcja dotycząca pierwszego kroku jest gotowa, aby nadać pierwszemu krokowi odpowiednią nazwę
  • Kliknij ikonę z sześcioma kropkami, aby otworzyć opcję ustawień i przejdź do układu ⇒ wieloetapowy .
  • Podaj nazwę w opcji Tytuł karty wieloetapowej
  • Wybierz ikonę z biblioteki lub prześlij plik SVG.
  • Kliknij aktualizację, aby zapisać.

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

Formularz rezerwacji Krok drugi – Informacje o rezerwacji:

• W drugim kroku musisz wybrać nową sekcję. Wybiorę nową sekcję z jedną kolumną, a następnie dodam nową sekcję wewnętrzną z dwoma równymi kolumnami.
• Po wybraniu kolumny przeciągnij i upuść pole wprowadzania 2 daty dla opcji zameldowania i wymeldowania.

Reguła obowiązkowa : aby rozpocząć nowy krok, musisz wybrać nową sekcję , w przeciwnym razie każde dodane pole wejściowe zostanie dodane do poprzedniego kroku. Dlatego zawsze pamiętaj, że nowe kroki wymagają nowej sekcji , nawet jeśli ma ten sam układ.

• Wraz ze wspomnianą opcją ustawień pola tekstowego dostępne są następujące ustawienia pola wprowadzania daty w sekcji Treść ⇒ Ustawienia
  • Ustaw bieżącą datę jako datę minimalną: Włącz tę opcję, aby ustawić bieżącą datę jako datę minimalną.
  • Ustaw datę minimalną 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ę.
  • Wprowadzanie dat zakresu: Włączając tę ​​opcję, możesz umożliwić użytkownikom wybór zakresu dat. Ale dla tego formularza zostawię tę opcję wyłączoną.
  • Wprowadzanie roku: Włącz tę opcję, aby uwzględnić rok jako część wprowadzania daty.
  • Wprowadzanie miesiąca: Aby włączyć miesiąc jako część wprowadzania daty, włącz tę opcję.
  • Wprowadzanie daty: Włącz tę opcję, aby wziąć datę (dzień) jako część wprowadzania daty
  • Format daty: Ustaw tutaj format wprowadzanej daty.
  • Lokalizacja: wybierz lokalizację z listy rozwijanej w oparciu o swoje preferencje.
  • Chcesz wprowadzić z tym czas: Włącz tę opcję, aby wziąć czas wraz z danymi jako dane wejściowe. Jeśli włączysz tę opcję, otrzymasz inną opcję, czyli Włącz czas 24 godziny. Korzystając z tej opcji, możesz włączyć format 24h.

Teraz wreszcie użyjemy funkcji formularza warunkowego dla pola Wyewidencjonuj. Aby pole zaewidencjonowania było widoczne tylko wtedy, gdy pole zaewidencjonowania jest puste,

• Skopiuj wartość pola Nazwa pola wejściowego Zaewidencjonuj.
• Następnie przejdź do Treść ⇒ Warunkowo , włącz opcję Włącz
• Wybierz ORAZ z listy rozwijanej Kryteria dopasowania warunku.
• Z menu rozwijanego Akcja wybierz opcję Pokaż to pole .
• Kliknij + DODAJ ELEMENT , w polu wejściowym if wklej skopiowaną wartość nazwy pola ewidencjonowania.
• Wybierz „ 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ą, aby formularz nie wyglądał źle, gdy opcja warunkowa początkowo ukrywa wyewidencjonowanie. Przeciągnij i upuść pole formularza Numer dwa razy , aby utworzyć dwa dodatkowe pola dla liczby pokoi i liczby Osób.

A ponieważ jest to środkowy krok, musimy uwzględnić przyciski Prev i Next .

Po zakończeniu edycji ustawień dla wszystkich dodanych pól dla tej sekcji, zmień nazwę sekcji/kroku z układu ⇒ wieloetapowy , tak jak w przypadku pierwszej sekcji. Nazywam to informacjami o rezerwacji.

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

Formularz rezerwacji Krok trzeci – Dodatkowe informacje

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

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

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

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

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

Krok 4: Włącz opcję formularzy wieloetapowych w MetForm

Teraz, gdy mamy już nasz formularz, nadszedł czas, aby przekonwertować go na działający formularz wieloetapowy. Aby to zrobić

• Przejdź do treści ⇒ Ustawienia wieloetapowe
• Włącz opcję wieloetapową, aby aktywować opcje wieloetapowe
• Włącz opcję Wyświetl wielokrokową nawigację, aby menu Sekcja pojawiło się na górze. Możesz także edytować różne ustawienia, takie jak Adaptive Form Container Height, Włącz przewijanie do góry itp.
• Po wprowadzeniu wszystkich zmian kliknij uaktualnij, aby zapisać

Krok 5: Skonfiguruj potwierdzenie, powiadomienie i inne ustawienia do ukończenia

Teraz, gdy zaprojektowałeś swój wieloetapowy formularz. Skonfigurujmy wszystkie ustawienia formularza, jakie oferuje MetForm. Aby zmodyfikować ustawienia MetForm z pulpitu WordPress, przejdź do MetForm ⇒ Formularze ⇒ Kliknij opcję Edytuj utworzonego właśnie formularza.

Uwaga: tutaj znajdziesz również skrócony kod utworzonego formularza , który po prostu skopiuj i wklej, aby dodać formularz w dowolnym miejscu na stronie. Możesz również uzyskać dostęp do ustawień formularza z opcji Edytuj formularz .

Tutaj znajdziesz następujące ustawienia:

Ogólny:

W ramach ustawień ogólnych możesz modyfikować tytuł, wiadomość o sukcesie, wymagane logowanie, liczbę wyświetleń itp. Możesz także ustawić dowolny niestandardowy adres URL , na który użytkownicy mają trafić po przesłaniu formularza.

Potwierdzenie:

Możesz wysłać wiadomość e-mail z potwierdzeniem do swoich użytkowników z kopią przesłanego formularza za pomocą tej wtyczki do tworzenia formularzy. Włącz opcję potwierdzenia, a następnie możesz ustawić temat wiadomości e-mail, wiadomość e-mail od, od wiadomości e-mail, odpowiedź e-mail do i wiadomość z podziękowaniem.

Ustawienia powiadomień:

Możesz również wysyłać wiadomości e-mail z powiadomieniem o formularzu do administratora za pomocą MetForm. Włącz opcję Powiadomienie e-mail do administratora. Następnie ustaw temat wiadomości e-mail, e-mail do, e-mail od, notatka administratora itp.

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

Oprócz ustawień, które opisałem na tym blogu, otrzymujesz również integrację, taką jak REST API, Mail Chimp, Google Sheet itp. Również integracja z bramką płatności, taką jak PayPal, Stripe. Integracja z CRM, która obejmuje HubSpot, Zoho itp. Otrzymasz również opcje uwierzytelniania, takie jak logowanie i rejestracja . Aby uzyskać więcej informacji na temat tych ustawień, zapoznaj się z naszą dokumentacją MetForm.

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

Zakończyć

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

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

Nie zapomnij sprawdzić wszystkich niesamowitych funkcji, jakie oferuje MetForm.