Cum să permiteți vizitatorilor să dubleze câmpurile de formular

Publicat: 2024-06-14

Există de multe ori când utilizatorii formularului dvs. probabil doresc să poată pur și simplu duplica câmpurile din formularele dvs. Câmpurile pentru nume suplimentare, detalii de contact, ore lucrate și așa mai departe sunt ușor de adăugat atunci când utilizatorii le pot repeta.

Acum, cu câmpul WPForms Repeater, utilizatorii site-ului dvs. pot face exact asta! În acest tutorial, vă voi arăta cum să vă modificați formularele pentru a permite câmpuri duplicate în doar 5 pași.

Cum să permiteți vizitatorilor să dubleze câmpurile de formular

În acest articol

  • 1. Selectați sau creați formularul dvs
  • 2. Adăugați câmpul Repeater
  • 3. Afișați rânduri sau blocuri
  • 4. Alegeți un aspect
  • 5. Personalizați vizualizarea butoanelor
  • Bonus: Câmpul Repeatorului în acțiune
  • FAQ

În primul rând, obțineți WPForms

Ok, știu că am spus că acest tutorial durează doar 5 pași, așa că pare suplimentar. Dar, este un fel de dat că veți avea nevoie de WPForms instalat și activat pe site-ul dvs. WordPress pentru a duplica câmpurile din formularele dvs.

WPForms home

Deci, obțineți mai întâi pluginul WPForms!

1. Selectați sau creați formularul dvs

Câmpul Repeater este o caracteristică excelentă inclusă în formularele pe care le creați prin WPForms. Cu acesta, utilizatorii formularului pot adăuga mai multe intrări sau pot duplica blocuri întregi ale formularului.

Dar nu trebuie să construiți un formular nou-nouț pentru a începe să le permiteți utilizatorilor să dubleze câmpuri.

Este posibil să utilizați deja formulare pe site-ul dvs. pe care doriți să le modificați cu câmpul Repeator. Pur și simplu faceți clic pe Editați sub formularul pentru care doriți să deschideți generatorul de formulare.

Editing a form

Dar, dacă trebuie să creați un formular nou, puteți obține un avans alegând dintre miile de șabloane de formulare furnizate în galeria WPForms.

Oferim o selecție extinsă de șabloane de formulare care vin cu funcționalitatea câmpului Repeater încorporată în ele.

Browsing the Repeater field form templates

Sau puteți alege un alt șablon de formular și puteți adăuga rapid câmpul Repeater cu generatorul de formulare.

Și, ca întotdeauna, vă puteți construi singur formularul de la zero, pornind cu un formular gol.

Creați-vă formularul WordPress acum

2. Adăugați câmpul Repeater

După ce ați selectat și încărcat formularul în generatorul de formulare, puteți adăuga câmpul Repeator .

Îl vei vedea printre câmpurile din partea stângă a ecranului.

Adding the Repeater field to a form

Pur și simplu faceți clic pe câmpul Repetitor, trageți-l în formularul dvs. și plasați-l acolo unde doriți.

Apoi, ca și câmpul Layout, câmpul Repeater permite adăugarea altor câmpuri din formularul dvs. în el.

Adding fields to the Repeater field area

Deci, ce câmpuri aparțin secțiunii câmp Repeater? Câmpurile pe care doriți să le permiteți utilizatorilor formularului să le dubleze.

Pe un formular de înregistrare de grup, de exemplu, utilizatorii ar dori probabil să includă mai multe nume de participanți pentru a se înregistra în același timp.

Front-end view of the Repeater field

Înainte ca WPForms să ofere câmpul Repeater, este posibil să fi înfundat formularul cu câteva câmpuri de nume de care utilizatorul * ar putea* avea nevoie.

Sau este posibil să fi folosit setări de logică condiționată pentru a include câmpuri suplimentare de nume dacă utilizatorul a dorit să includă mai multe.

Applying conditional logic settings

Oricare ar fi fost cazul, câmpul Repetitor face acum duplicarea câmpurilor mult mai ușoară pentru dvs. și utilizatorii formularului!

3. Afișați rânduri sau blocuri

Acum, înainte de a merge mai departe, aruncați o privire la opțiunile de afișare care sunt aplicate câmpului Repeater.

Selecting the Repeater field to display rows

Nu numai că puteți personaliza câmpurile din zona de câmpuri Repeater pentru a fi adăugate ca rânduri unice, dar puteți permite și duplicarea blocurilor întregi de câmpuri.

Sfat profesionist : navigați la fila Avansat pentru a ascunde eticheta câmpului Repeator așa cum am făcut-o.

Când selectați câmpurile din zona Repeator pentru a fi afișate ca Rânduri, utilizatorii formularului vor duplica fiecare linie orizontală.

Front-end view of the Repeater field block

După cum puteți vedea mai sus, butoanele + adăugați sau eliminați sunt la sfârșitul fiecărui rând.

Blocurile, pe de altă parte, sunt bune pentru combinarea câmpurilor care urmează să fie repetate împreună, care nu pot încăpea doar pe un singur rând.

Selecting the Repeater field display as Blocks

Și cu Blocuri, butoanele + adăugare sau – eliminare sunt sub întreaga secțiune de câmpuri. Mai multe despre acele butoane, mai târziu.

În exemplul meu de mai jos, am selectat Blocuri ca modalitate de a afișa câmpurile mele repetabile. Am inclus apoi câmpurile în zona câmpului Repeater pe care doresc ca utilizatorii să le poată duplica ca secțiune.

Front-end view of Repeater field blocks

Acum, când utilizatorii formularului adaugă un alt participant, ei pot furniza toate informațiile pe care le-am cerut în formular pentru fiecare Bloc.

În acest fel, utilizatorii formularului pot duplica simultan secțiuni întregi ale formularului.

4. Alegeți un aspect

Apoi, verificați diferitele moduri în care puteți aranja aspectul câmpurilor dvs. repetabile.

Selecting the Repeater field layout

Puteți configura câmpurile pe rânduri individuale, coloane uniform distanțate și coloane neuniforme.

Dacă aveți rânduri repetabile de nume și vârste ale participanților, de exemplu, puteți alege un aspect care poziționează un spațiu mai mare pentru nume și un spațiu mai mic pentru vârstă.

Selecting the Repeater field 2 column layout

Deci, exemplul meu de rânduri și coloane de aspect din generatorul de formulare de mai sus ar arăta astfel pentru un utilizator de formular:

Sau, amintiți-vă că blocul pe care v-am arătat-o ​​la sfârșitul pasului 3 cu numele participantului, informațiile de contact în caz de urgență și alte câmpuri?

Aș putea folosi un aspect de 2 coloane pentru a personaliza această parte a formularului.

Selecting the Repeater field 2 column layout

Apoi, ar arăta cam așa pentru utilizator:

Front-end view of the Repeater field 2 column layout

Sfat profesionist : Folosiți un câmp de nume simplu, cu o singură linie, pentru a menține coloanele la distanță uniformă, așa cum am făcut mai sus.

Modificarea acestor aspecte ale câmpului Repeator ajută la menținerea totul ordonat și organizat pe întregul formular.

5. Personalizați vizualizarea butoanelor

Ultimul lucru pe care trebuie să-l personalizați în secțiunea câmpurilor repetoare este butoanele + și – pentru adăugarea și eliminarea câmpurilor repetabile.

Acestea sunt butoanele pe care utilizatorul formularului va face clic pentru a adăuga nume, secțiuni de înregistrare sau orice alte câmpuri pe care le-ați pus la dispoziție pentru a le duplica.

În mod implicit, aceste butoane afișează + sau – la sfârșitul fiecărui rând, dar puteți personaliza aceste pictograme atunci când utilizați un bloc.

Navigating to the Repeater field button settings

Deoarece butoanele sunt găzduite sub bloc în loc de sfârșitul rândului, permițând ca acesta să devină mai lung prin personalizare, încă menține lucrurile ordonate vizual.

Mai întâi, selectați Tipul de buton .

Selecting the Repeater field button type

Opțiunile de aici includ:

  • Butoane cu pictograme
  • Butoane
  • Pictograme cu text
  • icoane
  • Text simplu

Dacă butonul dvs. afișează text de orice fel, îl puteți personaliza în caseta următoare. Aici puteți schimba ceea ce citește eticheta butonului .

Customizing the Repeater field button labels

Pe un formular de înregistrare de grup, de exemplu, puteți personaliza butonul pentru a citi „Adăugați un participant”.

În cele din urmă, puteți alege limita minimă și maximă pentru câmpurile dvs. repetabile.

Setting the Repeater field button limit

În mod implicit, această limită este setată la minimum 1 și maxim 10. Aceasta înseamnă că utilizatorii formularului pot înregistra până la 10 participanți pe acest formular.

Deci, atunci când aplicați setările prezentate mai sus, butonul de pe formularul nostru de înregistrare a grupului ar arăta astfel pentru utilizatori:

Front-end view of the Repeater field button

Ca întotdeauna, atunci când sunteți mulțumit de câmpurile personalizate, repetabile, asigurați-vă că salvați formularul dvs. de publicat când sunteți gata.

Și asta e tot ce este! Acum știți cum să permiteți vizitatorilor site-ului web să dubleze câmpurile din formularele dvs.

Bonus: Câmpul Repeatorului în acțiune

V-am arătat cum să utilizați zona de câmp Repeater într-un formular de înregistrare de grup, dar aș dori să vă împărtășesc alte câteva exemple bune ale acestei funcții în acțiune.

Formularul de pontaj al angajaților

Mai întâi, aruncați o privire la această fișă de pontaj a angajaților pe care o oferim ca șablon:

Full view of the employee timesheet form template

Detaliile angajatului sunt adunate mai întâi, inclusiv numele, adresa de e-mail al angajatului, ID-ul angajatului, plus numărul total de ore pe săptămână.

The employee details section of the template

Angajații își pot introduce apoi zilele și orele specifice de lucru pentru săptămână, folosind în esență acest formular ca foaie de pontaj săptămânal.

The weekly timesheet section of the form template

Utilizează blocuri și coloane repetabile care permit utilizatorilor să dubleze câmpuri pentru ziua săptămânii în care au lucrat, împreună cu timpul de intrare și de expirare a acelei zile. Aceste câmpuri pot fi repetate de până la 14 ori, sau pentru o săptămână de schimburi duble.

Doriți să utilizați acest formular pe site-ul dvs.? Obțineți șablonul!

Formular de listă de clasă

Acum, consultați această listă de clasă pe care o oferim și ca șablon:

Full view of the class roster form template

Începe prin a strânge informațiile profesorului pentru o urmărire ușoară cu fiecare trimitere.

The teacher information section of the form template

Apoi, cu câmpul Repeater, profesorii pot adăuga cu ușurință informații pentru fiecare elev din lista lor - cum ar fi nivelul clasei, ziua de naștere sau orice alte date pe care doresc să le includă pentru păstrarea înregistrărilor.

The class roster section of the form template

Profesorii pot folosi această listă pentru până la 20 de elevi. Sau, ca întotdeauna, acest șablon de formular este total personalizabil, astfel încât numărul maxim de intrări permis poate fi modificat.

Vă place această formă? Obțineți șablonul!

De ce ar trebui să permit vizitatorilor să dubleze câmpurile de formular?

Este bine pentru utilizatorii formularului tău! Permiterea vizitatorilor să dubleze câmpurile de formulare face procesul de completare a formularelor mult mai ușor, în special atunci când utilizatorii trebuie să introducă informații similare sau repetitive. Acest lucru poate economisi timp vizitatorilor site-ului dvs. și poate face experiența lor de completare a formularelor mai convenabilă și eficientă.

Și este bine și pentru tine! Când utilizatorii pot duplica câmpuri de formular, este mai ușor pentru dvs. să colectați și să organizați date pentru analiză, deoarece punctele de date similare sunt grupate și mai ușor de gestionat.

În plus, pur și simplu vă păstrează formularul organizat și atrăgător din punct de vedere vizual. Vizitatorii site-ului dvs. nu vor fi copleșiți de secțiuni lungi de câmpuri goale și nu va trebui să creați un traseu complicat de reguli de logică condiționată pentru a păstra câmpurile suplimentare ascunse.

The Repeater Field este un câștig-câștig pentru toată lumea!

FAQ

La WPForms, suntem întotdeauna încântați să oferim îndrumări cu privire la funcțiile și instrumentele pe care le oferim. Așadar, iată răspunsurile la unele dintre cele mai frecvente întrebări despre duplicarea câmpurilor de formular:

Ce înseamnă să le permiti vizitatorilor să dubleze câmpurile de formular?

Permiterea vizitatorilor să dubleze câmpurile de formular înseamnă să le oferiți o opțiune de a crea mai multe instanțe ale unui anumit câmp într-un formular. În acest fel, ei pot introduce informații similare sau repetitive mai eficient.

La WPForms, ne referim la aceste duplicate drept câmpuri Repeater, deoarece utilizatorii formularelor pot repeta aceste câmpuri pentru a introduce mai multe informații.

Cum pot implementa duplicarea câmpurilor pe formularele site-ului meu?

Metodele de implementare pot varia în funcție de platforma sau instrumentele pe care le utilizați.

În ceea ce privește WPForms, activăm duplicarea câmpurilor cu un simplu clic sau acțiune de glisare și plasare. În alte cazuri, poate fi necesar să utilizați cod personalizat sau pluginuri pentru a adăuga această funcționalitate.

Ar trebui să stabilesc o limită pentru numărul de ori în care un câmp de formular poate fi duplicat?

Setarea limitelor poate ajuta la menținerea gradului de utilizare a formularelor și poate împiedica utilizatorii să creeze un număr excesiv de câmpuri, care ar putea afecta performanța formularelor sau gestionarea datelor.

Cu câmpul WPForms Repeater, puteți seta o limită maximă pentru intrările duplicate, astfel încât să controlați acest aspect al formularului.

Creați-vă formularul WordPress acum

Apoi, consultați acest ghid rapid și ușor

Am împărtășit destul de multe informații despre cum să le permit vizitatorilor să dubleze câmpurile, dar există și mai multe de învățat despre utilizarea câmpului Repeater. Această caracteristică oferă atât de multe, încât sunt multe de acoperit.

Pentru a afla câteva sfaturi suplimentare rapide și ușoare – inclusiv idei de personalizare care nu sunt acoperite aici – asigurați-vă că aruncați o privire la tutorialul nostru de câmp Repeater .

Sunteți gata să vă construiți formularul? Începeți astăzi cu cel mai simplu plugin pentru generatorul de formulare WordPress. WPForms Pro include o mulțime de șabloane gratuite și oferă o garanție de rambursare a banilor de 14 zile.

Dacă acest articol v-a ajutat, vă rugăm să ne urmăriți pe Facebook și Twitter pentru mai multe tutoriale și ghiduri WordPress gratuite.