decembrie 9, 2021

Cum se creează liste derulante condiționale în formularele WordPress

Aflați cum să creați liste derulante condiționale în WordPress folosind formulare formidabile. O metodă simplă, fără cod, fără interogare.

cum se creează liste derulante condiționale în formularele WordPress

căutați o modalitate de a crea liste derulante condiționale în formulare în care opțiunile dintr-un drop-down depind de selecțiile pe care o persoană le-a făcut în drop-down-urile anterioare?

de exemplu, un formular de dealer auto în care un utilizator selectează mai întâi anul mașinii, apoi marca, apoi modelul dintr-o listă de opțiuni care se aplică numai anului/mărcii pe care le-a selectat deja. Este posibil să fi auzit, de asemenea, aceste tipuri de forme denumite înlănțuit selectați.

această funcționalitate este foarte utilă atunci când creați formulare pentru a gestiona estimările prețurilor, cotațiile, plățile etc. Este, de asemenea, excelent pentru utilizatorii finali, deoarece nu vor trebui să filtreze prin tone de opțiuni irelevante.

Formidable Forms este cel mai bun plugin WordPress Form Builder. Ia-l gratuit!

cu formulare formidabile, puteți configura liste derulante condiționate chiar dintr-o interfață ușor de utilizat-nu este nevoie să vă încurcați cu interogări complexe sau soluții de cod personalizate.

continuați să citiți pentru un ghid pas cu pas despre cum să creați drop-down-uri dependente în WordPress cu forme formidabile.

cum se creează liste derulante condiționate cu formulare formidabile

înainte de a săpa în tutorialul detaliat pas cu pas, să trecem printr-o privire la nivel înalt modul în care funcționează formularele derulante în cascadă cu formulare formidabile.

  1. creați un „formular de date” pentru a găzdui toate datele care vă vor popula drop-down-urile în cascadă. Utilizatorii finali nu vor interacționa direct cu acest formular – este doar acolo pentru a păstra datele.
  2. populați „formularul de date” cu datele de care are nevoie adăugând intrări. Dacă aveți o mulțime de date, puteți economisi timp importând un CSV, în loc să încercați să introduceți manual toate datele.
  3. creați un al doilea”formular de utilizator final”. Aceasta este forma cu care vizitatorii voștri umani vor interacționa.
  4. adăugați câmpuri de căutare la „formularul utilizatorului final”, astfel încât să poată extrage date din „formularul de date”, după cum este necesar, pentru a popula drop-down-urile.

să o parcurgem mai detaliat…

pentru acest exemplu, vom folosi un exemplu din industria auto cu trei câmpuri derulante condiționate. Ordinea va merge astfel:

  1. utilizatorul selectează anul mașinii sale
  2. utilizatorul selectează marca mașinii sale din mărci disponibile în acel an
  3. utilizatorul selectează modelul specific al mașinii sale în funcție de Anul/Marca pe care a selectat-o

creați „formularul de date”

pentru a începe, creați un nou formular care să acționeze ca un „formularul de date”. Din nou, utilizatorii dvs. finali nu vor interacționa direct cu acest formular, dar „formularul utilizatorului final” pe care îl creați ulterior va extrage datele sale din intrările acestui formular.

apoi, adăugați un câmp de text pentru fiecare listă verticală pe care doriți să o includeți în formularul de utilizator final. Pentru exemplul nostru, ar fi trei câmpuri de text pentru:

  1. anul
  2. marca
  3. Modelul

anul face forma modelului

apoi, salvați formularul.

importați date ca intrări de formular

apoi, va trebui să completați „formularul de date” cu opțiunile pe care doriți să le afișați în drop-down-urile în cascadă.

pentru a face acest lucru, veți adăuga fiecare bucată de date ca o intrare formular.

dacă aveți un set mare de date, cea mai ușoară metodă este să importați un fișier CSV. De exemplu, setul nostru de date auto are peste 7.000 de rânduri-asta nu este ceva ce vrei să faci manual!

dacă nu aveți o mulțime de date, puteți adăuga manual intrări din fila intrări din formularul de date.

pentru a importa un CSV în formulare formidabile, mai întâi asigurați-vă că titlurile din CSV se potrivesc cu câmpurile de text din „formularul de date”.

în Excel, puteți vedea cum exemplul nostru CSV are trei coloane, fiecare dintre acestea potrivindu-se cu câmpurile de text pe care le-am creat în pasul anterior:

Import cascadă dropdown

odată ce aveți fișierul CSV gata…

  • du-te la formidabil Import/Export Import
  • utilizați butonul Alegeți fișierul pentru a selecta fișierul CSV
  • introduceți delimitatorul CSV (aceasta este aproape întotdeauna o virgulă)
  • selectați „formularul de date” din meniul derulant Import în formular
  • Faceți clic pe Încărcați fișierul și importați

importați marca automată și modelul

în ecranul următor, asigurați-vă că datele din fișierul CSV sunt mapate corect la câmpurile corespunzătoare din formular. Apoi, faceți clic pe Import:

importați maparea câmpurilor de formular

acum, aveți datele de care aveți nevoie pentru a popula listele derulante condiționale:

importat an/face / model de date

apoi, este timpul pentru a crea liste derulante dependente pentru vizitatorii dvs. pentru a interacționa cu.

creați „formular utilizator final” și adăugați câmpuri de căutare

apoi, creați un formular nou. Aceasta va fi forma pe care o vor vedea vizitatorii voștri umani.

după ce aveți noul formular, adăugați un câmp de căutare și dați – i un nume-de exemplu, „selectați Anul”.

apoi, găsiți setările opțiunilor de căutare în câmp Setări și…

  • selectați formularul de date utilizând meniul derulant Selectare formular
  • selectați câmpul sursă din care să extrageți datele utilizând meniul derulant Selectare câmp – de ex. „an”

adăugați câmpul an mașină

asigurați-vă că salvați modificările.

apoi, adăugați un alt câmp de căutare și configurați-l pentru următorul set de date. Abia acum, veți utiliza și butonul Urmăriți un câmp de căutare pentru a face acest câmp de căutare dependent de câmpul de căutare anterior. Aceasta vă permite să afișați doar opțiuni care se potrivesc cu câmpul anterior și să creați acel efect „cascadă:

auto face dependent dropdown

asigurați-vă că pentru a salva modificările.

pentru a adăuga ultimul drop-down (pentru exemplul nostru, cel puțin), ați adăuga un alt câmp de căutare. Doar acum, veți utiliza opțiunea urmăriți un câmp de căutare pentru a-l face dependent de ambele câmpuri anterioare:

auto model cascading dropdowns

dacă doriți să adăugați mai multe drop-down-uri condiționate la formularul dvs., puteți repeta același model de câte ori este necesar.

și asta este – dacă previzualizați formularul, ar trebui să vedeți acel efect de cascadă frumos atunci când interacționați cu formularul:

dropdowns cascadă în WordPress formă

creați prima listă verticală condiționată astăzi

forme drop-down cascadă sunt o abordare populară, care face o opțiune excelentă pentru forme care implică estimări de preț, citate, plăți, locații, etc.

cu formulare formidabile, puteți crea liste derulante condiționale folosind cât mai multe condiții necesare, fără a scrie interogări sau coduri personalizate.

pentru a-l configura, tot ce trebuie să faceți este să creați două formulare și să utilizați câmpurile de căutare pentru a le conecta. Pentru seturi de date mari, puteți importa chiar și un fișier CSV direct din Excel pentru a popula formularul de date.

pentru a crea liste derulante dependente cu formulare formidabile, veți avea nevoie de planul de bază formidabil Forms sau de mai sus.

dacă nu utilizați deja Formidable Forms Pro, Aflați despre toate caracteristicile utile form builder pentru a înțelege de ce Formidable Forms este cel mai bun plugin WordPress form pentru listele derulante condiționale.

Lasă un răspuns

Adresa ta de email nu va fi publicată.