7 doskonałych przykładów wieloetapowych formularzy, które Cię zainspirują

Czy Twoje formularze online mogłyby skorzystać ze wzmocnienia UX? Te wieloetapowe przykłady formularzy dadzą ci świetne pomysły i wskazówki dotyczące najlepszych praktyk. Sprawdź je!

Przybliżony czas czytania: 7 minut

Nikt nie lubi wypełniać długich formularzy. Nawet my, jesteśmy w branży form.

Ale prawie każda witryna internetowa potrzebuje formularza, niezależnie od tego, czy chodzi o zapisanie się do newslettera, dokonanie płatności czy kontakt z obsługą klienta.

Jak więc, jako twórcy witryn, możemy sprawić, że wypełnianie formularzy będzie mniej uciążliwe, a jednocześnie będziemy gromadzić potrzebne informacje?

Odpowiedzią jest wieloetapowe projektowanie formularzy!

Zamiast bombardować ludzi wszystkimi naszymi pytaniami na raz, rozłożymy je na wiele stron lub kroków. Zapewnia to znacznie lepsze doświadczenie użytkownika, a mimo to nadal podstępnie namawiamy użytkowników do wypełniania tylu pól formularzy.

Przyjrzyjmy się teraz bliżej siedmiu fantastycznym przykładom wieloetapowych formularzy z Internetu i podzielmy się naszymi spostrzeżeniami, dzięki czemu będziesz mógł dalej pokonywać współczynniki konwersji!

Kiedy stosować formularze wieloetapowe (a kiedy nie)

Wiele sytuacji jest odpowiednich do użycia formularza wieloetapowego, w tym:

• Podania o pracę
• Testy lub egzaminy online
• Formularze rejestracyjne i rejestracyjne
• Quizy i lead magnety
• Kreatorzy onboardingu
• Prośba o wycenę

A to akurat nie mieści się nam w głowie. Naprawdę możesz użyć wielostronicowego projektu formularza do wszystkiego.

Ale czy powinieneś?

To, że możesz , nie znaczy, że powinieneś . To powiedzenie odnosi się do prawie wszystkiego w życiu i okazuje się, że odnosi się również do budowania form!

Prawdopodobnie nie powinieneś używać formularza wieloetapowego, jeśli formularz jest bardzo krótki i ma tylko kilka pól .

Byłoby dziwnie podzielić podstawowy formularz subskrypcji biuletynu, który wymaga jedynie podania imienia i nazwiska, adresu e-mail i numeru telefonu. Dodaje niepotrzebne kliknięcia. Im więcej kliknięć potrzeba do wypełnienia formularza, tym większe prawdopodobieństwo, że stracisz użytkowników, zanim klikną „Prześlij”.

Ale proste formularze nie są jedynymi, które mogą zyskać na umieszczeniu na jednej stronie. Niektóre bardziej złożone formy też mogą.

Na przykład Sephora ma jednoetapowy formularz na stronie kasy. ‼️ Biorąc pod uwagę, jak duża jest firma, z pewnością przeprowadzili badania i odkryli, że ich klienci wolą trzymać wszystko na jednym poziomie.

Zastosowali sprytne elementy projektu UX, aby formularz wydawał się krótszy, ograniczał rozpraszanie uwagi i redukował liczbę porzucań koszyków.

Zatem odpowiedź na pytanie, czy zastosować formularz wieloetapowy, czy jednostronicowy, sprowadza się do połączenia zdrowego rozsądku i twardych danych.

Znasz swoich użytkowników lepiej niż ktokolwiek inny. Nie bój się zagłębiać w statystyki i analizować wyniki ankiet, aby dowiedzieć się, co jest dla nich najlepsze!

Najlepsze przykłady formularzy wieloetapowych

1. Airbnb – Formularz rejestracji użytkownika

Na Airbnb utworzenie konta i uzupełnienie profilu może być łatwiejsze niż wybranie kolejnego miejsca na wakacje.

Formularz ma być przyjazny dla użytkownika i mieć wygląd, który działa dobrze na każdym urządzeniu. Ale to nie tylko projekt. Kopia oferuje również delikatne szturchnięcie, aby kontynuować przez kolejne kroki, jednocześnie informując, że możesz pominąć dowolny krok i wrócić do niego później.

Ta jedna mała linijka odciąża początkujących użytkowników.

Dlaczego to lubimy:

• Przyjazny dla urządzeń mobilnych, responsywny, wieloetapowy projekt formularza
• Łatwa nawigacja z przyciskiem Wstecz i opcją pominięcia
• Wskaźnik postępu
• Inteligentna, wydajna kopia

2. N26 - Utworzenie konta bankowego

N26 utrzymuje swoją podstawową formę bez uczucia zimna. Czy to nie miłe, gdy bank inwestuje trochę czasu i energii w uszczęśliwianie swoich klientów?

Ten responsywny formularz wygląda pięknie niezależnie od tego, czy korzystasz z telefonu, czy komputera stacjonarnego i płynnie prowadzi Cię przez nudne, ale ważne zadanie otwarcia konta bankowego.

Przedstawia wszystkie kroki z góry, więc nie ma niespodzianek. Opcja przełączania trybów oglądania to miły akcent, który poprawia komfort użytkowania.

Dlaczego to lubimy:

• Wskaźnik postępu
• Wyczyść listę kroków
• Łatwa nawigacja
• Opcja trybu jasnego / trybu ciemnego
• Logika warunkowa dla opcji opartych na kraju zamieszkania

3. Ubersuggest – magnes wiodący

Neil Patel, król SEO i marketingu cyfrowego, wytrącił go z równowagi (jak zwykle) dzięki temu formularzowi generowania leadów na stronie docelowej.

Układ tego wieloetapowego formularza quizu pozwala przebić się przez bałagan, nie powodując poczucia zagubienia ani samotności. Neil poprowadzi Cię przez całą drogę, podając uspokajające wyjaśnienia i jasne powody stojące za każdym pytaniem. W zamian jego agencja otrzymuje mnóstwo wykwalifikowanych leadów!

Dlaczego to lubimy:

• Czysty, minimalistyczny design
• Wskaźniki postępu
• Wyczyść opcje formularza
• Formularz konwersacyjny z jednym pytaniem na raz
• Przyjazna twarz i wyjaśnienia

4. Stripe - Rejestracja konta i wdrożenie użytkownika

Ten wieloetapowy przykład formularza od Stripe pomoże Ci skonfigurować konto bez żadnych problemów, a jednocześnie zapewni pewność i informacje zwrotne, których chcesz i potrzebujesz.

Od samego początku możesz mieć pewność, że jesteś w dobrych rękach, dzięki elegancko zaprojektowanemu formularzowi, w którym wyraźnie wskazano, dla kogo jest przeznaczona dana usługa, a także zapewniono bezpieczeństwo wszystkich ważnych informacji finansowych.

Dlaczego to lubimy:

• Informacje zwrotne na każdym kroku
• Przypomina użytkownikom o zaletach usługi
• Dowód społeczny
• Elegancki, prosty design

5. Zwykłe - Quiz produktowy

Kreator schematu stosowania The Ordinary bardziej przypomina rozmowę ze specjalistą ds. pielęgnacji skóry lub osobistym klientem niż wieloetapowy formularz. Ale to wszystko, forma!

Zadając pytania zamknięte i udostępniając im proste opcje, takie jak suwaki, możesz wypełnić formularz w krótkim czasie i bez większego wysiłku. A kiedy już skończysz, możesz kliknąć, aby natychmiast dodać sugerowane produkty do koszyka.

Gdyby tylko wszystkie zakupy były tak łatwe i przyjemne!

Dlaczego to lubimy:

• Czas wypełnić formularz wymieniony w pierwszym kroku
• Spersonalizowane rekomendacje produktów
• Logika warunkowa
• Format konwersacyjny
• Minimalistyczny design formy wpisujący się w misję marki

6. Małe paszporty – quiz o produkcie i kasa

Little Passports zamienia wypełnianie formularzy w zabawną przygodę polegającą na samodzielnym wybieraniu. Proces realizacji transakcji składa się z wielu etapów, które Cię wciągają i prezentują różne zestawy, które wzbudzają ciekawość dzieci. Każda część formularza została zaprojektowana tak, aby wybór pudełka subskrypcyjnego był równie ekscytujący, jak jego otrzymanie.

Dlaczego to lubimy:

• Personalizacja
• Logika warunkowa
• Wskaźnik postępu
• Zabawny i kolorowy projekt

7. Geico – Zapytanie ofertowe

Dzięki wieloetapowemu formularzowi wyceny ubezpieczenia Geico wszystko jest jasne, przyjazne i szybkie. Ich przyjazna, mała maskotka-gekon jest po to, aby Cię dopingować podczas klikania opcji. Nagle kwestie związane z ubezpieczeniami wydają się dużo mniej przerażające!

Formularz ten jest szybki i pomocny. Na koniec otrzymasz natychmiastową wycenę, podczas gdy nasz gad-przyjaciel zbierze odpowiednie kontakty do potencjalnych klientów, z którymi skontaktuje się później.

Dlaczego to lubimy:

• Duże przyciski opcji z obrazami zapewniającymi dostępność
• Elastyczny projekt
• Spersonalizowany produkt lub usługa
• Opcje produktu przed zapytaniem o dane osobowe

Klucze do dobrego, wieloetapowego projektowania formularzy

Czego zatem możemy się nauczyć z tych przykładów?

Jeśli spojrzymy na to, co je łączy, kilka wieloetapowych najlepszych praktyk związanych z UX stanie się jasnych:

• Wskaźniki postępu - pasek postępu, linia główna, ponumerowane kroki, szacunki czasu itp.
• Jasne i przyjazne informacje zwrotne dotyczące pola – wymagane pola, komunikaty o błędach, komunikaty potwierdzające
• Personalizacja - dynamiczne pola i dopasowane rekomendacje
• Responsywny design – formularze muszą wyglądać świetnie i być łatwe w użyciu na ekranie dowolnej wielkości
• Ogranicz pytania otwarte — używaj menu rozwijanych, przycisków, suwaków i przełączników zamiast pól tekstowych

Staraliśmy się uwzględnić te elementy również w formularzach na naszej stronie. Oto jak wyglądał nasz wielostronicowy formularz kasy. Co myślisz? Zachęcamy do wypróbowania tego osobiście tutaj.

Gotowy do tworzenia własnych wieloetapowych formularzy?

Teraz, gdy jesteś już pełen wiedzy i inspiracji, czas działać! Ale jak zamienić tę niesamowitą, wieloetapową formę, o której myślisz, w rzeczywistość?

Oczywiście odbierasz naszą wtyczkę!

Możemy być nieco stronniczy, ale Formidable Forms to naprawdę najlepszy wieloetapowy kreator formularzy dla WordPress. Umożliwia dodawanie i dostosowywanie pasków postępu, przycisków formularzy i ponad 30 typów pól formularzy.

Za pomocą Formidable Forms możesz nawet tworzyć formularze konwersacyjne, quizy dotyczące rekomendacji produktów, kalkulatory i ankiety. Tak, masz to wszystko w jednej wtyczce!

Kliknij poniżej, aby pobrać narzędzie do tworzenia formularzy WordPress i rozpocząć tworzenie wieloetapowych arcydzieł.

Zacznij korzystać z Formidable Forms!

Wypróbuj Formidable Pro bez ryzyka dzięki naszej 14-dniowej gwarancji zwrotu pieniędzy lub zacznij korzystać z naszej bezpłatnej wtyczki do tworzenia formularzy.

Aby uzyskać więcej zabawy w formie online, śledź nas na Facebooku, Twitterze i YouTube. Do następnego razu!

Dowiedz się więcej o wieloetapowym projektowaniu formularzy

• 9 najlepszych wieloetapowych wtyczek WordPress
  Czytaj więcej

  Jak utworzyć wieloetapowy formularz Ajax w WordPress
  Czytaj więcej

  Jak utworzyć formularz wieloetapowy z paskami postępu
  Czytaj więcej