Cum să adăugați un formular cu mai mulți pași în WordPress în 5 pași simpli

Știați că transformarea formularului dvs. WordPress cu un singur pas în formularul cu mai mulți pași WordPress vă poate crește conversia cu aproape 60% ? De fapt, în unele cazuri, rata de conversie poate ajunge până la 300% .

Da. Pentru că în zilele noastre, oamenii sunt prea ocupați și au o perioadă scurtă de atenție. În plus, dacă le ceri să completeze un formular lung într-un singur pas, este cel mai probabil să părăsească site-ul tău, lăsând formularul incomplet.

Cu toate acestea, puteți schimba acest scenariu utilizând un formular cu mai mulți pași pentru site-ul dvs. WordPress. Dar întrebarea este cum?

Ei bine, de aceea sunt aici pentru a vă arăta un ghid pas cu pas despre cum să adăugați un formular cu mai mulți pași în WordPress.

Continuați să citiți pentru a afla cum puteți crea cu ușurință un formular cu mai mulți pași pe site-ul WordPress în doar câteva minute...

Ce este un formular cu mai mulți pași?

Ei bine, după cum sugerează și numele, este un formular cu mai mulți pași în care întrebările/câmpurile de introducere sunt împărțite în pași diferiți, mai degrabă decât să le pună pe toate într-un singur pas. Dacă sunteți în căutarea unei definiții, iată cum definește HubSpot forma cu mai mulți pași.

O formă în mai multe etape este o formă lungă care este ruptă în mai multe bucăți. Sunt obișnuiți să facă forme lungi mai puțin intimidante și descurajante.

– Hubspot

Formularele cu mai mulți pași sunt în principiu un substitut pentru formularul lung cu prea multe câmpuri de intrare. Dacă aveți o formă relativ mai mică, atunci puteți rămâne la o formă într-un singur pas.

Acum că știți ce este un formular cu mai mulți pași, să vedem câteva dintre motivele pentru care ar trebui să luați în considerare adăugarea unui formular cu mai mulți pași pe site-ul dvs. WordPress.

De ce să folosiți formularul cu mai mulți pași în WordPress?

Ei bine, răspunsul simplu este să vă creșteți vertiginos rata de conversie. Formularele cu mai mulți pași devin în prezent extrem de populare pe site-urile web cu utilizări precum formulare de înregistrare, formulare de rezervare, formulare de comandă de alimente etc. Unele dintre motivele pentru care ar trebui să luați în considerare și utilizarea formularului cu mai mulți pași pe site-ul dvs. includ:

• Formularele cu mai mulți pași funcționează mai bine atunci când vine vorba de a atrage atenția utilizatorului. Drept urmare, oamenii se implică mai mult și își completează mai des trimiterea formularelor.
• Utilizatorii consideră că multistep este mai ușor de utilizat și oferă o ușurință mai bună în utilizare decât nu o face un formular lung cu un singur pas.
• Deoarece există o bară de navigare/bară de progres cu un formular cu mai mulți pași, utilizatorii se simt mai încurajați să completeze un formular cu mai mulți pași.
• Formularele condiționate cu mai mulți pași sunt excelente pentru a colecta numai datele relevante de care aveți nevoie.
• Ca rezultat al tuturor părților pozitive menționate mai sus, formularele cu mai mulți pași cresc rata de conversie.

Acum că știți că ar trebui să utilizați formulare cu mai mulți pași pe site-ul WordPress, este timpul să creați configurația perfectă de care aveți nevoie pentru a vă construi formularul cu mai multe părți.

Configurați aveți nevoie pentru a construi un formular WordPress în mai mulți pași

Împreună cu WordPress, veți avea nevoie de încă două plugin-uri pentru a crea cu ușurință formulare în mai mulți pași în WordPress. Acele pluginuri WordPress sunt:

1. Elementor (versiunea gratuită)
2. MetForm (gratuit și pro)

Elementor este cel mai bun generator de pagini WordPress, iar MetForm este unul dintre pluginurile WordPress cu cea mai rapidă creștere pentru formulare în mai mulți pași. Dacă aveți nevoie de ajutor la instalarea MetForm, puteți arunca o privire la documentația noastră despre cum să instalați MetForm.

După ce ați terminat instalarea, trebuie să creați o pagină cu generatorul de pagini Elementor înainte de a putea utiliza Metform. Pentru asta, accesați Tabloul de bord ⇒ Pagina ⇒ Adăugați nou .

Acum, furnizați un titlu adecvat, selectați Elementor Full Width ca șablon, faceți clic pe Publicare h. După aceea, faceți clic pe Editare cu Elementor.

În cele din urmă, sunteți setat să vă construiți formularul în mai mulți pași. Deci, să trecem la procesul principal.

Notă: În acest tutorial, vă voi arăta cum să adăugați un formular în mai mulți pași la o pagină. Dar puteți adăuga cu ușurință formulare create cu MetForm într-un pop-up modal.

Cum să creezi un formular cu mai mulți pași în WordPress

În acest blog, veți învăța să creați un formular modern în mai mulți pași de la zero, în doar 5 pași simpli:

Pasul 1: Trageți și plasați MetForm

Odată ce sunteți în modul Editare cu Elementor , căutați MetForm și trageți și plasați în locul în care doriți să apară formularul.

Pasul 2: Creați un formular nou

Faceți clic pe secțiunea formular pentru a accesa opțiunile Edit MetForm . Faceți clic pe butonul Editați formular .

Odată ce apare o fereastră nouă

• Selectați Nou (creați un formular nou)
• Furnizați un nume de formular pentru formular
• Alegeți șablonul gol,
• și faceți clic pe Editați formularul

Pasul 3: Construiți formularul cu mai mulți pași de la zero folosind MetForm și generatorul de pagini Elementor

După ce faceți clic pe Editați formularul, veți avea acces la o altă fereastră nouă cu generatorul de pagini Elementor pentru a vă crea formularul de la zero. Pentru a construi un singur pas de formular cu mai mulți pași, trebuie să urmați acești patru pași:

Adăugați o secțiune nouă

Trageți și plasați câmpurile de introducere în funcție de cerințe

Trageți și plasați butonul Prev/Next/Submit, în funcție de fraza din formular

Furnizați un nume propriu secțiunii

Pentru acest blog, voi crea o demonstrație cu 3 pași Formular de rezervare de hotel în mai mulți pași folosind pașii menționați mai sus. Cei trei pași ai formularului vor include informații personale, informații despre rezervare și informații suplimentare

Formularul de rezervare Pasul unu – Informații personale:

• Pentru secțiunea Informații personale, faceți clic pe pictograma Elementor + și alegeți o structură cu două coloane egale .

• Căutați câmpul de introducere text și trageți și plasați câmpul formular în coloana din stânga.

• Acum, pentru a edita atributul acestui câmp de introducere, faceți clic pe semnul de editare, mergeți la Conținut ⇒ conținut și editați următoarele opțiuni:
  • Afișare etichetă: Activați această opțiune pentru a afișa eticheta câmpului de introducere.
  • Poziție: puteți alege să poziționați eticheta în sus sau în stânga.
  • Etichetă: dați un nume etichetei dvs. Voi folosi „Prenumele”.
  • Nume: câmpul de nume este obligatoriu și trebuie să fie unic. Deci, asigurați-vă că dați un nume diferit fiecărui câmp și înlocuiți spațiul cu liniuță/cratima.
  • Substituent: furnizați un text substituent.
  • Text de ajutor: În cazul în care doriți să furnizați un text de ajutor pentru utilizatori, puteți face acest lucru aici.

• Apoi, accesați Conținut ⇒ Setări pentru a modifica următoarele opțiuni:
  • Obligatoriu: pentru ca acest câmp să fie obligatoriu, activați această opțiune.
  • Tip de validare: puteți seta diferite tipuri de validare pentru câmpul de text în funcție de lungimea caracterului, lungimea cuvântului și expresie.
  • Mesaj de avertizare: Aici puteți seta mesajul de avertizare care va apărea dacă cerința nu este îndeplinită.

Notă: voi folosi caracteristica logică condiționată la al doilea pas al acestui formular.

La fel ca și Prenume, adăugați un alt câmp de introducere a textului pentru numele de familie. Ca parte a pasului privind informațiile personale, aici voi adăuga încă două câmpuri; E-mail și număr de mobil.

Odată ce ați terminat de modificat setările câmpului de e-mail și număr de mobil. Căutați și trageți și plasați butonul Următorul pas . Puteți modifica diferite setări ale butoanelor, cum ar fi Eticheta, alinierea butoanelor, pictograma, poziția pictogramei etc.

• Acum secțiunea pentru primul pas este gata, pentru a da un nume propriu primului pas
  • Faceți clic pe pictograma cu șase puncte pentru a deschide opțiunea de setări și mergeți la aspect ⇒ mai mulți pași .
  • Furnizați un nume în opțiunea Titlu filă cu mai mulți pași
  • Alegeți o pictogramă din bibliotecă sau încărcați un SVG.
  • Faceți clic pe actualizare pentru a salva.

Acum că prima secțiune este gata, să construim al doilea pas.

Formularul de rezervare Pasul doi – Informații despre rezervare:

• Pentru al doilea pas trebuie să alegeți o nouă secțiune. Voi alege o nouă secțiune cu o singură coloană și apoi voi adăuga o nouă secțiune interioară cu două coloane egale.
• După alegerea coloanei, trageți și plasați câmpul de introducere a 2 date pentru opțiunile de check-in și check-out.

Regulă de urmat : trebuie să alegeți o nouă secțiune pentru a începe noul pas , în caz contrar, orice câmp de introducere pe care îl adăugați va fi adăugat la pasul anterior. Deci, amintiți-vă întotdeauna, pașii noi necesită o nouă secțiune, chiar dacă are același aspect.

• Împreună cu opțiunea de setări menționată pentru câmpul de text, obțineți următoarele setări pentru câmpul de introducere a datei din Conținut ⇒ Setări
  • Setați data curentă ca dată minimă: Activați această opțiune pentru a seta data curentă ca dată minimă.
  • Setați data minimă manual: dacă nu doriți să setați data curentă ca dată minimă, puteți seta și data minimă manual.
  • Setați manual data maximă: Aici puteți seta data maximă.
  • Dezactivați lista de date: puteți utiliza această opțiune pentru a dezactiva anumite date. Pentru a dezactiva orice dată, faceți clic pe butonul +ADĂUGAȚI ARTICOL și selectați data.
  • Introducerea datei intervalului: activând această opțiune, puteți permite utilizatorilor opțiunea de a selecta un interval de date. Dar pentru acest formular, voi lăsa această opțiune dezactivată.
  • Introducerea anului: activați această opțiune pentru a lua un an ca parte a introducerii datei.
  • Introducere luni: pentru a activa luna ca parte a introducerii datei, activați această opțiune.
  • Introducerea datei: Activați această opțiune pentru a lua o dată (zi) ca parte a introducerii datei
  • Format date: setați aici formatul datei introduse.
  • Localizare: alegeți locația din meniul drop-down în funcție de preferințele dvs.
  • Doriți să introduceți timpul cu acesta: activați această opțiune pentru a lua timp împreună cu datele ca intrare. Dacă activați această opțiune, veți primi o altă opțiune, care este Activare timp 24 de ore. Folosind această opțiune puteți activa formatul de 24 de ore.

Acum, în sfârșit, vom folosi caracteristica formularului condiționat pentru câmpul Check Out. Pentru a face câmpul de check out vizibil numai atunci când câmpul de check-in este gol,

• Copiați valoarea câmpului Nume din câmpul de intrare Înregistrare.
• Apoi accesați Conținut ⇒ Condițional , activați opțiunea de activare
• Alegeți ȘI din meniul derulant Criterii de potrivire a condiției.
• Din opțiunile drop-down Acțiune, alegeți Afișați acest câmp .
• Faceți clic pe + ADĂUGAȚI ARTICOL , în câmpul de introducere if, inserați valoarea numelui câmpului de înregistrare pe care ați copiat-o.
• Alegeți „ nu gol ” din meniul drop-down al potrivirii (comparație).

Acum faceți clic pe butonul de previzualizare pentru a vedea. Câmpul de check-out ar trebui să fie vizibil numai după ce alegeți o dată de check-in.

Adăugați o nouă secțiune interioară, astfel încât formularul să nu arate rău atunci când opțiunea condiționată ascunde check-out inițial. Trageți și plasați câmpul de formular Număr de două ori pentru a crea încă două câmpuri pentru numărul de camere și numărul de persoane.

Și, deoarece este pasul din mijloc, trebuie să includem atât butoanele Prev, cât și Next .

Odată ce ați terminat cu editarea setărilor pentru toate câmpurile adăugate pentru această secțiune, schimbați numele secțiunii/pasului din aspect ⇒ mai mulți pași, așa cum ați făcut cu prima secțiune. Îi denumesc Informații de rezervare.

Acum al doilea pas este gata, să trecem la al treilea pas

Formularul de rezervare Pasul trei – Informații suplimentare

Pentru al treilea pas, să adăugăm o nouă secțiune cu o singură coloană. Și adăugați un câmp de text și denumiți-l Informații suplimentare.

Apoi, adăugați o secțiune interioară cu două coloane în cadrul secțiunii. După aceea, trageți și plasați un buton anterior și apoi un buton de trimitere pentru trimiterea formularului.

Notă: puteți adăuga câte secțiuni interioare doriți. Dar pentru a crea un nou pas, trebuie să adăugați o nouă secțiune.

Pentru a da un nume celei de-a treia secțiuni, mergeți la aspect ⇒ mai mulți pași și adăugați titlul „ Informații suplimentare ” și adăugați o pictogramă.

În cele din urmă, am terminat de construit formularul nostru WordPress cu mai mulți pași cu 3 pași. Acum faceți clic pe actualizare pentru a salva și închide fereastra pentru a trece la setările în mai mulți pași.

Pasul 4: Activați opțiunea Formular cu mai mulți pași a MetForm

Acum că avem formularul nostru, este timpul să îl convertim într-un formular funcțional în mai mulți pași. Pentru a face asta

• Accesați Conținut ⇒ Setări în mai mulți pași
• Activați opțiunea de activare cu mai mulți pași pentru a activa opțiunile cu mai mulți pași
• Activați Display Multistep Nav, astfel încât meniul Secțiuni să apară în partea de sus. De asemenea, puteți edita diferite setări, cum ar fi Înălțimea containerului formularului adaptiv, Activarea derulării în partea de sus etc.
• După ce ați făcut toate modificările, faceți clic pe actualizare pentru a salva

Pasul 5: Configurați confirmarea, notificarea și alte setări pentru finalizare

Acum că v-ați proiectat formularul în mai mulți pași. Să configuram toate setările de formular pe care MetForm le oferă. Pentru a modifica setările MetForm din tabloul de bord WordPress, accesați MetForm ⇒ Formulare ⇒ Faceți clic pe opțiunea Editare a formularului pe care tocmai l-ați creat.

Notă: Aici veți găsi, de asemenea, codul scurt al formularului pe care l-ați creat, pe care doar copiați și lipiți pentru a adăuga formularul oriunde pe site. Puteți accesa setările formularului și din opțiunea Editați formular .

Aici veți găsi următoarele setări:

General:

Ca parte a setărilor generale, puteți modifica titlul, mesajul de succes, autentificarea necesară, numărul de vizualizări etc. Puteți, de asemenea, să setați orice adresă URL personalizată la care doriți să ajungă utilizatorii după trimiterea formularului.

Confirmare:

Puteți trimite un e-mail de confirmare utilizatorilor dvs. cu o copie a formularului trimis cu acest plugin de generare de formulare. Activați opțiunea de confirmare și apoi puteți seta Subiectul e-mailului, E-mailul de la, De la e-mail, Răspuns e-mail către și mesajul de mulțumire.

Setări de notificare:

Puteți trimite e-mailuri de notificare de formular către administrator și cu MetForm. Activați e-mailul de notificare către opțiunea de administrator. Apoi setați Subiectul e-mailului, E-mailul către, E-mailul de la, Notă admin etc.

După ce ați făcut toate modificările, derulați în jos și faceți clic pe Salvare modificări pentru a actualiza setările.

În afară de setări, pe care le-am acoperit în acest blog, obțineți și integrare precum REST API, Mail Chimp, Google Sheet etc. De asemenea, integrarea gateway-ului de plată precum PayPal, Stripe. Integrare CRM care include HubSpot, Zoho etc. De asemenea, aveți opțiuni de autentificare precum autentificare și înregistrare . Pentru mai multe detalii despre aceste setări, consultați documentația noastră a MetForm.

Dacă ați urmat corespunzător pașii menționați, ar trebui să primiți un formular de rezervare în mai mulți pași, precum cel de mai jos:

Învelire

Acolo, tocmai ați creat formularul WordPress în mai mulți pași în câteva minute. Dacă credeți că acest formular este simplu, nu vă faceți griji. Scopul principal al acestui blog a fost de a arăta cum puteți crea un formular în mai mulți pași în WordPress folosind MetForm.

Acum că știți cum să creați un formular WordPress în mai mulți pași, vă puteți crea formularul și logica personalizate. Sper că utilizați funcțiile MetForm pentru a crea formulare minunate în mai mulți pași. În cazul în care vă confruntați cu probleme pe parcurs, împărtășiți-ne, echipa noastră vă va răspunde în cel mai scurt timp.

Nu uitați să verificați toate caracteristicile uimitoare pe care MetForm le oferă.