Vizitatorii încep să completeze formularul dvs. de contact, apoi îl abandonează brusc pe jumătate. Este una dintre cele mai frustrante experiențe pentru orice proprietar de site web, mai ales când știți că acele lead-uri ar putea transforma afacerea dvs.
Adevărul este că formularele lungi intimidează utilizatorii și creează fricțiuni inutile în procesul de conversie.
După ani de zile în care am ajutat proprietarii de site-uri WordPress să-și optimizeze formularele, am descoperit că utilizarea câmpurilor de tip dropdown poate îmbunătăți ratele de completare a formularelor dvs.
În plus, aceste elemente simple nu numai că economisesc spațiu prețios pe ecran, dar îi și ghidează pe utilizatori să furnizeze exact informațiile pe care doriți să le cunoașteți despre ei.
În acest tutorial, vă vom arăta cea mai ușoară modalitate de a crea formulare WordPress cu câmpuri derulante pe care vizitatorii doresc cu adevărat să le completeze.
Ce sunt câmpurile de tip Dropdown și de ce să le folosiți?
Un câmp de tip drop-down permite utilizatorilor să aleagă o singură opțiune dintr-o listă predefinită de variații diferite. Utilizatorii pot face pur și simplu clic pe câmp pentru a vedea toate alegerile drop-down.
Ca proprietar de site web, poți folosi câmpuri de tip dropdown pentru a crea formulare web, cum ar fi formulare de contact, formulare de înregistrare la evenimente, înscrieri la newsletter prin email sau formulare de comandă de produse.
Câmpurile de tip dropdown pot îmbunătăți eficacitatea formularului dvs. Iată câteva avantaje:
- Consistență. Setul de opțiuni prestabilit menține datele colectate consistente și previne intrările invalide. Acest lucru face analiza datelor mai precisă.
- Câmpuri dinamice. Câmpurile de tip dropdown facilitează setarea logicii condiționale. Lista prestabilită de opțiuni vă permite să afișați câmpuri suplimentare în funcție de selecția utilizatorului, fără obstacole inutile.
- Lungime redusă a formularului. Combinarea mai multor opțiuni într-un meniu dropdown compact face ca formularul dvs. să pară mai puțin intimidant. Acest lucru poate duce la o experiență mai bună pentru utilizator.
Acestea fiind spuse, să vedem cum să creăm formulare cu câmpuri derulante în WordPress. Iată o prezentare generală rapidă a pașilor pe care îi vom acoperi în acest tutorial:
- Pasul 1: Instalarea celui mai bun plugin pentru formulare de contact
- Pasul 2: Crearea unui nou formular folosind WPForms
- Pasul 3: Adăugarea câmpului Dropdown la formularul dvs.
- Pasul 4: Configurarea dropdown-urilor cu opțiuni și logică condiționată
- Pasul 5: Personalizarea notificărilor și confirmărilor formularului dvs.
- Pasul 6: Încorporarea formularului dvs. în WordPress
- Pasul 7: Publicarea noului formular pe site-ul dvs. WordPress
- Sfat bonus: Modalități creative de a folosi câmpurile de tip dropdown
- Întrebări frecvente: Utilizarea câmpurilor derulante în formularele WordPress
- Resurse suplimentare: Stăpânește formularele tale WordPress
Să începem!
Pasul 1: Instalarea pluginului Cel mai bun formular de contact
WPForms este cel mai bun plugin pentru formulare de contact pentru WordPress. Dispune de instrumente AI și peste 2.000 de șabloane, care vă ajută să creați formulare cu doar câteva clicuri.
La WPBeginner, folosim WPForms pentru a crea formularele noastre de contact, sondajele anuale ale utilizatorilor și cererile de migrare și nu am putea fi mai mulțumiți!
Nu ezitați să aflați despre toate funcționalitățile sale în recenzia completă WPForms.
📢 Note: WPForms Lite vine cu funcționalitatea de câmp dropdown. Acestea fiind spuse, recomandăm achiziționarea versiunii premium a pluginului, astfel încât să puteți configura logica condițională și să îmbunătățiți experiența utilizatorului pe formularul dvs.
Vestea bună este că cititorii WPBeginner beneficiază de o reducere specială de 50% folosind cuponul WPForms: SAVE50.
Deci, să instalăm și să activăm pluginul WPForms. Puteți accesa Plugins » Add New Plugin din tabloul de bord WordPress.
Pe ecranul următor, puteți folosi butonul de căutare pentru a găsi plugin-ul WPForms. Odată găsit, puteți face clic pe „Instalați plugin-ul” și apoi pe „Activați”.
Pentru instrucțiuni detaliate, puteți citi ghidul nostru despre cum să instalați un plugin WordPress.
Pasul 2: Crearea unui nou formular folosind WPForms
La activare, ar trebui să vedeți un meniu WPForms în zona de administrare WordPress, similar cu acesta:
Acum, veți putea accesa interfața de construire WPForms și crea formulare cu câmpuri de tip dropdown.
Pentru a începe să construiți un nou formular, puteți accesa WPForms » Adăugare Nou.
Acum, vei vedea panoul „Configurare” în constructorul de formulare WPForms. În acest panou, primul lucru pe care va trebui să îl faci este să numești formularul.
De exemplu, puteți tasta „Formular de contact simplu” sau doar „Formular de contact” în câmpul „Numește-ți formularul”.
Odată ce acest lucru este gata, este timpul să alegeți cum veți construi formularul dvs. WordPress.
Cu WPForms, puteți crea de la zero, alege un șablon predefinit sau utiliza constructorul de formulare bazat pe AI.
Dacă doriți să utilizați constructorul de formulare AI, tot ce trebuie să faceți este să introduceți o solicitare simplă. AI-ul va genera apoi formularul pentru dvs. în câteva secunde.
Pentru acest ghid, totuși, vom folosi ‘Formular de contact simplu’.
Pentru a utiliza un șablon de formular, tot ce trebuie să faceți este să treceți cu mouse-ul peste cel dorit și să faceți clic pe „Utilizare șablon”.
Pentru instrucțiuni pas cu pas, consultați ghidul nostru detaliat despre cum să creezi un formular de contact în WordPress.
Pasul 3: Adăugarea câmpului Dropdown la formularul dvs.
După finalizarea procesului de configurare, veți fi redirecționat către constructorul de formulare, unde există o listă de câmpuri în stânga și o previzualizare live în dreapta.
Acum, dorim să adăugăm un câmp de tip dropdown la formularul nostru de contact.
Pur și simplu trageți „Dropdown” și plasați-l în partea dreaptă a formularului.
📢 Notă: Toate câmpurile din categoria „Câmpuri standard” sunt disponibile pe WPForms Lite. Astfel, puteți crea formulare cu câmpuri cu alegere multiplă sau adăuga CAPTCHA în formularele de conectare și înregistrare gratuit.
În dreapta panoului, veți putea vedea un câmp de tip dropdown pe formularul dvs. de contact. Puteți plasa cursorul peste câmp pentru a accesa setările acestuia, care includ:
- Un buton de copiere
- Un buton de ștergere
- O instrucțiune 'Faceți clic pentru a edita'
- O instrucțiune „Trage pentru a reordona”
Folosind funcția de glisare și fixare, să mutăm câmpul derulant deasupra ‘Comentariu sau mesaj’.
Având câmpul de paragraf 'Comentariu sau mesaj' chiar înainte de butonul de trimitere, oferiți un flux mai bun pentru procesul de completare a formularului. De asemenea, face câmpul dvs. dropdown mai vizibil, astfel încât utilizatorii să nu-l ignore.
Pasul 4: Configurarea dropdown-urilor cu opțiuni și logică condiționată
În acest pas, veți configura eticheta, opțiunile și descrierea câmpului dvs. dropdown. Lista dvs. de opțiuni ar trebui să se alinieze cu tipul formularului dvs. Deoarece creăm un formular de contact, să oferim o opțiune de abonare la newsletter.
Faceți clic pe câmpul dvs. dropdown și apoi accesați „Opțiuni câmp”.
Pe fila „General”, completați detaliile necesare:
- Etichetă. În câmpurile derulante, etichetele sunt de obicei întrebări. Vom folosi „Doriți să vă abonați la newsletter-ul nostru?” ca exemplu.
- Opțiuni. Să adăugăm „Da, vă rog.” și „Nu, mulțumesc.”
- Descriere. Puteți lăsa „Vă puteți dezabona oricând.” în acest câmp.
- Obligatoriu. Activați această opțiune pentru a solicita vizitatorilor să completeze acest câmp.
🧑💻 Sfat Pro: Alegerile AI vă pot economisi timp generând instantaneu opțiuni relevante pentru câmpurile derulante, cu alegere multiplă sau casete de selectare. În loc să tastați fiecare opțiune manual, alegeți un prompt predefinit sau introduceți-l pe al dumneavoastră și lăsați AI-ul să facă treaba pentru dumneavoastră.
În continuare, vom configura logica condițională.
Logica condițională înseamnă luarea deciziilor cu instrucțiuni de tip „dacă” și „atunci”. Când este utilizată în formulare, aceasta decide ce se întâmplă în continuare pe baza răspunsului oferit de un utilizator.
Configurarea logicii condiționale face formularele mai ușor de completat. Prin afișarea doar a opțiunilor relevante pe baza selecțiilor anterioare, formularul dvs. nu copleșește utilizatorii cu alegeri inutile.
În acest exemplu, să afișăm un câmp suplimentar dacă utilizatorii aleg opțiunea „Da, vă rog”. Vom permite abonaților să aleagă cât de frecvent doresc să primească e-mailuri promoționale.
Înainte de asta, va trebui să pregătiți un nou câmp. Reveniți la fila „Adăugare câmpuri” și faceți clic pe „Derulant” sau pe orice alt tip de câmp. Apoi, completați detaliile noului câmp.
Iată un exemplu:
Acum că noul câmp este gata, faceți clic pe el și navigați la fila „Logică inteligentă”.
De aici, poți activa logica condițională activând opțiunea „Activează logica condițională”.
Odată activat, puteți configura logica condițională pentru noul dvs. câmp.
Începeți prin a alege să „Afișați” sau să „Ascundeți” noul câmp. Apoi, selectați un câmp existent și o intrare a utilizatorului.
Iată configurația noastră ca referință: „Afișează” acest câmp dacă „Doriți să vă abonați la newsletter-ul nostru” este „Da, vă rog”.
🧑💻 Sfat Pro: Doriți să adăugați utilizatori direct la lista dvs. de e-mail? Consultați tutorialul nostru despre cum să construiești o listă de e-mail în WordPress.
Pasul 5: Personalizarea notificărilor și confirmărilor formularului dvs.
Este timpul să vă personalizați noul formular.
Puteți începe prin configurarea notificărilor prin e-mail de fiecare dată când un utilizator nou trimite un formular. Accesați Setări » Notificări și activați opțiunea „Activați notificările”.
Apoi, parcurgeți detaliile implicite de notificare ale formularului dvs. sub comutator.
Unele intrări din câmpul „Notificare implicită” au o „Etichetă inteligentă”. Această etichetă presupune unde să trimiteți notificările de trimitere a formularului, printre altele. Acestea fiind spuse, puteți ajusta setările în funcție de nevoile dvs.
De exemplu, câmpul „Adresa de email trimisă” are eticheta inteligentă {admin_email}. Implicit, aceasta va fi adresa de email a administratorului site-ului dvs. WordPress. Astfel, toate notificările de trimitere a formularului vor ajunge în inboxul de email al administratorului.
Puteți adăuga mai mulți destinatari, cum ar fi specialistul dvs. în marketing prin email. Asigurați-vă doar că separați fiecare email cu o virgulă.
Dacă doriți să aflați cum să trimiteți emailul formularului dvs. către mai multe persoane sau departamente diferite, citiți ghidul nostru despre cum să creați un formular de contact cu mai mulți destinatari.
În continuare, textul implicit pentru linia de subiect a e-mailului dvs. este „Intrare nouă: Numele formularului dvs.”. Cu toate acestea, puteți modifica linia de subiect după cum doriți, atâta timp cât este ușor de identificat.
Utilizatorii care trimit un formular ar trebui să primească o notificare în e-mailurile lor. Câmpul „Nume expeditor” îi informează pe utilizatori cine trimite e-mailul de notificare.
Următorul câmp este „De la Email”, iar „Eticheta inteligentă” pentru acest câmp este {admin_email}.
Cu această setare implicită, utilizatorii vor primi e-mailuri de notificare de la e-mailul de administrator al site-ului dvs.
Partea evidențiată vă informează că adresa de e-mail a administratorului site-ului dvs. se află pe un domeniu diferit, de exemplu, @gmail.com. Acest lucru poate duce la probleme de livrare, cum ar fi e-mailurile care ajung în dosarul „Spam”.
Puteți citi ghidul nostru despre configurarea WP Mail SMTP pentru a vă asigura că emailurile ajung în inboxul cititorilor.
Pentru fiecare e-mail de notificare trimis, destinatarul are, de asemenea, opțiunea de a răspunde la acesta.
În câmpul „Reply-To”, puteți seta ce adresă de e-mail va primi răspunsurile utilizatorilor. Eticheta inteligentă a acestui câmp este {field_id= “1”}. Aceasta înseamnă că răspunsurile utilizatorilor vor ajunge la aceeași adresă de e-mail ca cea din câmpul „From Email”.
În cele din urmă, câmpul „Mesaj email” are eticheta inteligentă {all_fields}. Astfel, mesajul dvs. de email va conține câmpurile formularului dvs. împreună cu răspunsurile utilizatorilor.
După ce ați terminat de personalizat notificările, navigați la „Confirmări”. În această secțiune, veți configura cum să afișați confirmarea după trimiterea formularului.
Mai întâi, puteți alege „Mesaje”, „Afișare pagină” sau „Mergi la URL (Redirecționare)” ca tip de confirmare.
Dacă alegeți „Mesaj” ca tip de confirmare, veți afișa un mesaj de confirmare pentru a informa utilizatorii că ați primit trimiterile formularelor lor.
Cu acest tip de confirmare, puteți edita mesajul implicit pentru a se potrivi mărcii dvs. Accesați câmpul „Confirmation Message” și introduceți mesajul personalizat în caseta de text.
Dacă alegeți „Afișați pagina”, va trebui să selectați o pagină existentă pe site-ul dvs. WordPress. Și dacă optați pentru „Mergi la URL (Redirecționare)”, veți introduce un URL de pagină.
Înainte de a trece la următorul pas, apasă pe „Salvează” pentru a nu-ți pierde progresul.
Cu aceasta realizată, sunteți gata să afișați noul dvs. formular pe site-ul WordPress.
Pasul 6: Încorporarea formularului dvs. în WordPress
Pentru a afișa noul formular pe site-ul dvs. WordPress, puteți utiliza expertul „Încorporare” din constructorul de formulare WPForms.
Aceasta va declanșa fereastra pop-up „Încorporați într-o pagină”. Pe ea, puteți alege „Selectați pagina existentă” sau „Creați pagină nouă”, oricare dintre acestea este relevant pentru dvs.
În acest exemplu, vom alege „Selectarea paginii existente”.
Următorul pas este să alegeți pagina unde doriți să afișați noul formular.
Pur și simplu faceți clic pe dropdown și alegeți o pagină web existentă. După ce faceți acest lucru, faceți clic pe „Let’s Go!”.
Acest lucru vă va redirecționa către editorul de blocuri WordPress.
De aici, trebuie să faceți clic pe butonul „+” pentru a adăuga un bloc WPForms.
Puteți tasta „WPForms” în bara de căutare și ar trebui să vedeți blocul WPForms în rezultatele căutării.
Continuați și faceți clic pentru a-l adăuga.
După adăugarea blocului WPForms, vei vedea un meniu derulant pe pagina ta.
Pur și simplu faceți clic pe derulant și alegeți un formular din listă. Să selectăm ‘Formular de contact’, deoarece acesta este formularul pe care tocmai l-am creat.
Pasul 7: Publicarea noului formular pe site-ul dvs. WordPress
În această etapă finală, să previzualizăm formularul înainte de publicare pentru a ne asigura că totul arată perfect. În editorul de conținut WordPress, faceți clic pe View » Preview in new tab.
Dacă doriți, puteți previzualiza și cum arată formularul pe tablete și dispozitive mobile. Tot ce trebuie să faceți este să faceți clic pe Vizualizare » Tabletă sau Mobil » Prevualizare într-o filă nouă.
În final, dacă nu mai sunt necesare ajustări suplimentare, poți merge mai departe și apăsa pe „Actualizează”.
Felicitări! Ați adăugat cu succes noul dvs. formular de contact cu câmpuri de tip dropdown pe site-ul dvs. WordPress.
Iată cum arăta pe site-ul nostru demo:
Sfat bonus: Modalități creative de a utiliza câmpurile de tip dropdown
Știți ce este uimitor la câmpurile de tip dropdown? Sunt mult mai versatile decât cred majoritatea oamenilor!
După ani de construire de site-uri web, am descoperit câteva modalități cu adevărat ingenioase de a utiliza dropdown-uri care depășesc obișnuitele formulare de contact. Iată câteva dintre cazurile noastre creative preferate pentru a vă inspira:
🛍️ Configuratoare de produse – Acest lucru permite utilizatorilor să personalizeze produsele, cum ar fi „Alege culoarea”, „Selectează mărimea” sau „Alege finisajul”. Acest lucru este perfect pentru paginile de produse WooCommerce sau formularele de comandă personalizate.
📅 Programări – Afacerile mici sau site-urile de servicii pot beneficia de dropdown-uri în cascadă pentru selectarea datei și a intervalelor orare. Acest lucru este deosebit de util pentru sistemele de rezervare sau solicitările de consultanță.
🗺️ Servicii bazate pe locație – Puteți adăuga câmpuri de tip dropdown pentru selecția țării, statului și orașului în timp ce încorporați hărți în formularele dvs. Acest lucru poate fi extrem de util pentru serviciile de livrare sau directoarele locale de afaceri.
✏️ Formulare de test – Câmpurile derulante sunt, de asemenea, perfecte pentru întrebări cu variante multiple. Dacă administrați un curs online, atunci puteți folosi aceste câmpuri pentru a menține totul ordonat și organizat!
Mai presus de toate, puteți oricând personaliza și stiliza formularele WordPress suplimentar, astfel încât să se potrivească cu designul site-ului dvs.
Întrebări frecvente: Utilizarea câmpurilor derulante în formularele WordPress
Iată răspunsuri la unele dintre cele mai frecvente întrebări despre utilizarea câmpurilor de tip dropdown în WordPress.
Care este cel mai bun plugin pentru crearea formularelor cu câmpuri dropdown?
Recomandăm WPForms ca fiind cea mai bună opțiune. Instrumentele sale AI accelerează procesul, constructorul drag-and-drop este foarte ușor de utilizat, iar câmpul de tip dropdown este inclus chiar și în versiunea gratuită WPForms Lite.
Pentru funcționalități avansate precum logica condițională, versiunea WPForms Pro este o actualizare excelentă.
Pot adăuga gratuit câmpuri dropdown la formularele mele?
Da! Pluginul gratuit WPForms Lite include câmpul standard de tip dropdown, permițându-vă să creați formulare organizate și ușor de utilizat, fără a cheltui niciun ban.
Câmpurile dropdown sunt prietenoase cu dispozitivele mobile?
Absolut. Când folosiți un plugin de calitate precum WPForms, toate câmpurile formularului sunt complet responsive. Asta înseamnă că meniurile derulante se ajustează automat pentru a arăta grozav și a funcționa perfect pe desktopuri, tablete și smartphone-uri.
Pot folosi imagini ca opțiuni în câmpurile formularului meu?
WPForms Pro include o funcție „Alegeri de imagini” pentru butoanele radio și casetele de selectare. Deși aceasta nu este disponibilă pentru câmpurile derulante, le permite utilizatorilor să aleagă dintre opțiuni vizuale, perfect pentru selecția de produse și formulare similare.
Resurse suplimentare: Stăpânește formularele tale WordPress
Sperăm că acest ghid v-a ajutat să învățați cum să creați formulare WordPress cu câmpuri de tip dropdown. Dacă ați găsit acest ghid util, iată câteva ghiduri selectate pentru a vă ajuta să profitați mai mult de ele:
- Cum să personalizați și să stilizați formularele dvs. WordPress
- Cum să folosești un formular de contact pentru a-ți crește lista de emailuri
- Cum să blocați spam-ul formularelor de contact în WordPress
- Cum să urmăriți și să reduceți abandonul formularelor în WordPress
- Ghidul complet pentru utilizarea formularelor WordPress
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
kzain
Mă chinuiam să creez un formular WordPress cu câmpuri de tip dropdown, dar acest ghid a făcut totul incredibil de ușor. Îmi place cum ați descompus procesul în pași simpli și ați recomandat pluginuri ușor de utilizat precum WPForms. Capturile de ecran și sfaturile despre personalizarea câmpurilor formularului sunt super utile. Mi-ați economisit mult timp și frustrare.
Moinuddin Waheed
Îmi amintesc că mă chinuiam să creez formularele care pot avea aceste caracteristici.
Acum pot folosi cu ușurință wpforms pentru a crea orice formular cu funcționalitatea de dropdown.
Ajută la utilizarea logicii condiționale în wpforms pentru o mai bună interacțiune cu utilizatorii.
Ajută la obținerea celor mai bune informații de la utilizatori și ajută la înțelegerea mai bună a publicului.
Folosesc wpforms de destul de mult timp și mă folosesc de aceste caracteristici pentru o mai bună interacțiune cu utilizatorii.
Jiří Vaněk
Câmpurile de tip dropdown în WPForms funcționează foarte bine. Aveam câteva câmpuri în formularul meu de contact unde doream ca utilizatorii să scrie cu propriile cuvinte, dar nimeni nu le folosea, deoarece era prea consumator de timp pentru toată lumea. Abia când am realizat puterea câmpurilor de tip dropdown, lucrurile au început să se schimbe. În loc de câmpurile text tradiționale, am oferit opțiuni de tip dropdown, iar rata de completare și trimitere a formularului a crescut cu zeci de procente. Este incredibil cum o schimbare atât de simplă poate îmbunătăți performanța formularului și poate facilita completarea acestuia de către oameni.
Mrteesurez
Crearea formularelor cu câmpuri de tip drop-down a fost un punct de cotitură pentru mine, mai ales când am de-a face cu formulare complexe care necesită logică condiționată. Îmi amintesc că m-am chinuit cu constructori de formulare greoi în trecut, dar WPForms a făcut incredibil de ușor să creez formulare intuitive, ușor de utilizat. Câmpurile de tip drop-down sunt deosebit de utile pentru simplificarea alegerilor și asigurarea că utilizatorii pot găsi rapid opțiunea potrivită. Abilitatea de a personaliza și ajusta aceste formulare fără a avea nevoie de cunoștințe de codare mi-a economisit nenumărate ore. Această metodă nu este doar ușoară, ci și foarte eficientă, mai ales pentru oricine gestionează mai multe formulare pe site-urile sale.