7 exemple excelente de formulare în mai mulți pași pentru a vă inspira

Publicat: 2024-03-29

Formularele dvs. online ar putea folosi un impuls UX? Aceste exemple de formulare în mai mulți pași vă vor oferi câteva idei grozave și cele mai bune practici. Verifică-i!

Cele mai bune exemple de formulare în mai mulți pași

Timp de citire aproximativ: 7 minute

Nimănui nu-i place să completeze formulare lungi. Chiar și noi și suntem în formă de afaceri.

Dar aproape fiecare site web are nevoie de un formular, fie că este vorba de a vă înscrie la un buletin informativ, de a efectua o plată sau de a contacta serviciul pentru clienți.

Deci, în calitate de constructori de site-uri, cum putem face formularele mai puțin dificil de completat, în timp ce colectăm informațiile de care avem nevoie?

Obțineți formulare mai bune GRATUIT!

Răspunsul este proiectarea formularului în mai mulți pași!

În loc să bombardăm oamenii cu toate întrebările noastre dintr-o dată, le vom întinde pe mai multe pagini sau pași. Oferă o experiență mult mai bună pentru utilizator și, în continuare, îi convingem pe utilizatori să completeze la fel de multe câmpuri de formular.

Acum, să aruncăm o privire mai atentă la șapte exemple fantastice de formulare în mai mulți pași de pe web și să împărtășim ideile noastre, astfel încât să puteți continua și să cucerim ratele de conversie!


  • Când să folosiți formularele cu mai mulți pași (și când nu)
  • Cele mai bune exemple de formulare în mai multe etape
    • Cheile pentru o bună proiectare a formularelor în mai multe etape
    • Sunteți gata să vă creați propriile formulare în mai mulți pași?

    Când să folosiți formularele cu mai mulți pași (și când nu)

    O mulțime de situații sunt adecvate pentru utilizarea unui formular în mai mulți pași, inclusiv:

    • Cereri de angajare
    • Teste sau examene online
    • Formulare de înregistrare și înscriere
    • Teste și magneți de plumb
    • Vrăjitorii de integrare
    • Cereri de cotatie de pret

    Și asta e chiar din capul nostru. Puteți utiliza cu adevărat designul de formulare cu mai multe pagini pentru orice.

    Dar ar trebui?

    Doar pentru că poți nu înseamnă că ar trebui . Această zicală este adevărată pentru aproape orice în viață și se dovedește că se aplică și construcției formelor!

    Probabil că nu ar trebui să utilizați un formular în mai mulți pași dacă formularul este foarte scurt și are doar câteva câmpuri .

    Exemplu de tip pop-up modal Bootstrap de formular de înscriere la buletin informativ

    Ar fi ciudat să împărțim un formular de bază de abonare la buletin informativ care cere doar un nume, o adresă de e-mail și un număr de telefon. Adaugă clicuri inutile. Și cu cât sunt necesare mai multe clicuri pentru a vă completa formularul, cu atât este mai probabil să pierdeți utilizatori înainte de a apăsa „Trimite”.

    Dar formularele simple nu sunt singurele care ar putea beneficia de a fi pe o singură pagină. Unele forme mai complexe pot, de asemenea.

    De exemplu, Sephora are un formular cu un singur pas pe pagina de plată. ️ Având în vedere cât de mare este compania, cu siguranță au făcut cercetări și au descoperit că clienții lor preferă să păstreze totul pe aceeași pagină.

    Ei au folosit câteva elemente inteligente de design UX pentru a face forma să pară mai scurtă și, pentru a limita distragerile - și pentru a reduce abandonul căruciorului.

    Exemplu de pagină de plată Sephora cu un design de formular într-un singur pas

    Așadar, răspunsul la utilizarea unui formular cu mai mulți pași sau pe o pagină se rezumă la o combinație de bun simț și date dure.

    Îți cunoști utilizatorii mai bine decât oricine altcineva. Nu vă fie teamă să cercetați statisticile și să analizați rezultatele sondajului pentru a afla ce funcționează cel mai bine pentru ei!

    Cele mai bune exemple de formulare în mai multe etape

    1. Airbnb - Formular de înregistrare utilizator

    Excelent exemplu de proiectare a formei în mai multe etape

    Pe Airbnb, crearea unui cont și completarea profilului poate fi mai ușor decât alegerea următoarei locuri de vacanță.

    Formularul se referă la a fi ușor de utilizat, cu un design care funcționează bine pe orice dispozitiv. Dar nu este doar designul. Copia oferă, de asemenea, un ghiont ușor pentru a continua pașii, anunțându-vă în același timp că puteți sări peste orice pas și să reveniți la el mai târziu.

    Acea linie mică elimină multă presiune asupra utilizatorilor începători.

    De ce ne place:

    • Design de formular în mai mulți pași, adaptabil pentru dispozitive mobile
    • Navigare ușoară cu butonul înapoi și opțiunea de a sări peste
    • Indicator de progres
    • Copiere inteligentă, eficientă

    2. N26 - Creare cont bancar

    Formular curat și modern în mai mulți pași pentru servicii bancare online

    N26 își păstrează forma la esențial fără a simți frig. Nu este frumos când o bancă investește puțin timp și energie pentru a-și face clienții fericiți?

    Acest formular receptiv arată minunat, indiferent dacă sunteți pe telefon sau pe desktop, și vă ghidează fără probleme prin sarcina plictisitoare, dar importantă, de a deschide un cont bancar.

    Prezintă toți pașii în avans, așa că nu există surprize. Iar opțiunea de a schimba modurile de vizualizare este o atingere plăcută care îmbunătățește experiența utilizatorului.

    De ce ne place:

    • Indicator de progres
    • Lista clară de pași
    • Navigare ușoară
    • Opțiune modul de lumină/mod întunecat
    • Logica condiționată pentru opțiuni bazate pe țara de reședință

    3. Ubersuggest - Magnet de plumb

    Exemplu de formular în mai mulți pași pentru Ubersuggest de Neil Patel

    Neil Patel, regele SEO și marketingul digital, l-a scos din parc (ca de obicei) cu acest formular de generare de clienți potențiali pe pagina de destinație.

    Aspectul acestui formular de chestionar în mai mulți pași trece prin dezordine fără a te face să te simți pierdut sau singur. Neil este acolo pentru a vă ghida pe tot drumul, cu explicații liniștitoare și motive clare în spatele fiecărei întrebări. În schimb, agenția lui primește tone de clienți potențiali calificați!

    De ce ne place:

    • Design curat, minimalist
    • Indicatori de progres
    • Ștergeți opțiunile de formular
    • O singură întrebare la un moment dat, format de formular conversațional
    • Față prietenoasă și explicații

    4. Stripe - Înregistrarea contului și integrarea utilizatorului

    Formular de înscriere Stripe

    Acest exemplu de formular în mai mulți pași de la Stripe vă ajută să vă configurați contul fără niciun fel de agitație, oferind în același timp siguranța și feedbackul de care doriți și de care aveți nevoie.

    De la început, vă puteți da seama că sunteți pe mâini bune cu un formular care este bine structurat, care listează clar cui este serviciul și păstrează toate informațiile financiare importante în siguranță.

    De ce ne place:

    • Feedback la fiecare pas
    • Amintește utilizatorilor despre beneficiile serviciului
    • Dovada sociala
    • Design elegant, simplu

    5. Obișnuit - Test de produs

    Exemplul de formular obișnuit în mai mulți pași pentru recomandări de produse de îngrijire a pielii

    Creatorul de regim al lui Ordinary se simte mai mult ca o conversație cu un specialist în îngrijirea pielii sau cu un personal shopper decât un formular în mai mulți pași. Dar asta e tot, o formă!

    Adresând întrebări scurte și oferindu-le opțiuni simple, cum ar fi glisoare, puteți completa formularul în cel mai scurt timp și fără prea mult efort. Și când ați terminat, puteți face clic pentru a adăuga instantaneu produsele sugerate în coș.

    Dacă toate experiențele de cumpărături ar fi atât de ușoare și plăcute!

    De ce ne place:

    • Este timpul să completați formularul enumerat la primul pas
    • Recomandări personalizate de produse
    • Logica condițională
    • Format conversațional
    • Design minimalist al formei care se potrivește cu misiunea mărcii

    6. Mici pașapoarte - Chestionare despre produse și checkout

    Exemplu de formular cu mai multe pagini pentru caseta de abonament Little Passports

    Little Passports transformă completarea formularelor într-o aventură jucăușă la alegerea ta. Procesul lor de achiziție are mai mulți pași care vă atrag, prezentând diferite kituri pentru a stârni curiozitatea copiilor. Fiecare parte a formularului este concepută pentru a face alegerea unei casete de abonament la fel de interesantă ca și obținerea acesteia.

    De ce ne place:

    • Personalizare
    • Logica condițională
    • Indicator de progres
    • Design distractiv și colorat

    7. Geico - Cerere de cotatie

    Exemplu de formular de cotație de asigurare Geico

    Formularul de cotație de asigurare în mai mulți pași de la Geico menține lucrurile clare, prietenoase și rapide. Mica lor mascota prietenoasă gecko este acolo pentru a vă încuraja pe măsură ce faceți clic pe opțiunile dvs. Dintr-o dată, lucrurile cu asigurări par mult mai puțin înfricoșătoare!

    Acest formular este rapid și util. Și la sfârșit, primiți o cotație de preț instantanee, în timp ce prietenul nostru reptilă colectează clienți potențiali calificați pentru a le urmări mai târziu.

    De ce ne place:

    • Butoane radio mari cu imagini pentru accesibilitate
    • Design receptiv
    • Produs sau serviciu personalizat
    • Opțiuni de produs înainte de a solicita informații personale

    Cheile pentru o bună proiectare a formularelor în mai multe etape

    Deci, ce putem învăța din aceste exemple?

    Dacă ne uităm la ceea ce au în comun, câteva dintre cele mai bune practici UX în mai mulți pași devin clare:

    • Indicatori de progres - bara de progres, linia rădăcină, pași numerotați, estimări de timp etc.
    • Feedback clar și prietenos pe câmp - câmpuri obligatorii, mesaje de eroare, mesaje de confirmare
    • Personalizare - domenii dinamice și recomandări personalizate
    • Design receptiv - formularele trebuie să arate grozav și să fie ușor de utilizat pe ecran de orice dimensiune
    • Limitați întrebările deschise - utilizați meniuri derulante, butoane, glisoare și comutări în loc de câmpuri de text

    Am încercat să includem aceste elemente și în formularele de pe site-ul nostru. Iată cum a rezultat formularul nostru de finalizare a plății cu mai multe pagini. Ce crezi? Simțiți-vă liber să-l încercați aici.

    Formular de plată în mai mulți pași, cu indicator de progres și dovadă socială

    Sunteți gata să vă creați propriile formulare în mai mulți pași?

    Acum că ești plin de cunoștințe de formă și inspirație, este timpul să acționezi! Dar cum transformi acea formă minunată în mai mulți pași pe care o ai în minte în realitate?

    Preluați pluginul nostru, desigur!

    Poate că suntem puțin părtinitori, dar Formidable Forms este cu adevărat cel mai bun generator de formulare în mai mulți pași pentru WordPress. Vă permite să adăugați și să personalizați bare de progres, butoane de formular și peste 30 de tipuri de câmpuri de formular.

    Formidable Forms ne permite să creăm cu ușurință formulare complexe, cu mai multe etape. Caracteristica Formulare conversaționale ne permite să ghidăm clientul prin ceea ce ar părea copleșitor pe o singură pagină. Lori S.

    Puteți chiar să creați formulare conversaționale, chestionare de recomandare de produse, calculatoare și sondaje cu Formulare formidabile. Da, primești toate astea într-un singur plugin!

    Așa că faceți clic mai jos pentru a obține creatorul de formulare WordPress și pentru a începe să vă creați capodoperele în mai mulți pași.

    Începeți cu Formidable Forms!

    Încercați Formidable Pro fără riscuri cu garanția noastră de rambursare a banilor în 14 zile sau începeți cu pluginul nostru gratuit pentru generarea de formulare.

    Pentru mai multă distracție online, urmăriți-ne pe Facebook, Twitter și YouTube. Pana data viitoare!


    Aflați mai multe despre proiectarea formularelor în mai mulți pași