Come consentire ai visitatori di duplicare i campi del modulo

Pubblicato: 2024-06-14

Ci sono molte volte in cui gli utenti del tuo modulo probabilmente desiderano poter semplicemente duplicare i campi sui tuoi moduli. I campi per nomi aggiuntivi, dettagli di contatto, ore lavorate e così via sono facili da aggiungere quando gli utenti possono semplicemente ripeterli.

Ora, con il campo WPForms Repeater, gli utenti del tuo sito web possono fare proprio questo! In questo tutorial ti mostrerò come modificare i tuoi moduli per consentire campi duplicati in soli 5 passaggi.

Come consentire ai visitatori di duplicare i campi del modulo

In questo articolo

  • 1. Seleziona o crea il tuo modulo
  • 2. Aggiungere il campo Ripetitore
  • 3. Visualizza righe o blocchi
  • 4. Scegli un layout
  • 5. Personalizza la visualizzazione dei pulsanti
  • Bonus: il campo ripetitore in azione
  • FAQ

Innanzitutto, ottieni WPForms

Ok, lo so, ho detto che questo tutorial richiede solo 5 passaggi, quindi sembra extra. Ma è un dato di fatto che avrai bisogno di WPForms installato e attivato sul tuo sito WordPress per duplicare i campi sui tuoi moduli.

WPForms home

Quindi, prima procurati il ​​plugin WPForms!

1. Seleziona o crea il tuo modulo

Il campo Ripetitore è un'ottima funzionalità inclusa nei moduli creati tramite WPForms. Con esso, gli utenti del modulo possono aggiungere più voci o duplicare interi blocchi del modulo.

Ma non è necessario creare un modulo completamente nuovo per iniziare a consentire agli utenti di duplicare i campi.

Potresti già utilizzare moduli sul tuo sito che desideri modificare con il campo Ripetitore. Fai semplicemente clic su Modifica sotto il modulo per il quale desideri aprire il generatore di moduli.

Editing a form

Ma, se hai bisogno di creare un nuovo modulo, puoi ottenere un vantaggio scegliendo tra migliaia di modelli di modulo forniti nella galleria WPForms.

Offriamo un'ampia selezione di modelli di moduli dotati della funzionalità di campo Ripetitore incorporata.

Browsing the Repeater field form templates

In alternativa, puoi scegliere un modello di modulo diverso e aggiungere rapidamente il campo Ripetitore con il generatore di moduli.

E, come sempre, puoi creare tu stesso il tuo modulo da zero, iniziando con un modulo vuoto.

Crea ora il tuo modulo WordPress

2. Aggiungere il campo Ripetitore

Una volta selezionato e caricato il modulo nel generatore di moduli, puoi aggiungere il campo Ripetitore .

Lo vedrai tra i campi sul lato sinistro dello schermo.

Adding the Repeater field to a form

Basta fare clic sul campo Ripetitore, trascinarlo nel modulo e rilasciarlo dove desideri.

Quindi, come il campo Layout, il campo Ripetitore consente di aggiungere altri campi nel modulo.

Adding fields to the Repeater field area

Quindi, quali campi appartengono alla sezione Campo ripetitore? I campi che vuoi consentire agli utenti del modulo di duplicare.

In un modulo di registrazione di gruppo, ad esempio, gli utenti probabilmente vorrebbero includere più nomi di partecipanti da registrare contemporaneamente.

Front-end view of the Repeater field

Prima che WPForms offrisse il campo Ripetitore, potresti aver intasato il tuo modulo con una manciata di campi Nome di cui il tuo utente * potrebbe * aver bisogno.

Oppure potresti aver utilizzato le impostazioni della logica condizionale per includere campi Nome aggiuntivi se l'utente desiderava includerne di più.

Applying conditional logic settings

Qualunque sia il caso, il campo Ripetitore ora rende la duplicazione dei campi molto più semplice per te e per gli utenti del tuo modulo!

3. Visualizza righe o blocchi

Ora, prima di andare oltre, diamo un'occhiata alle opzioni di visualizzazione applicate al campo Ripetitore.

Selecting the Repeater field to display rows

Non solo puoi personalizzare i campi all'interno dell'area del campo Ripetitore da aggiungere come singole righe , ma puoi anche consentire la duplicazione di interi blocchi di campi.

Suggerimento professionale : vai alla scheda Avanzate per nascondere l'etichetta del campo Ripetitore come ho fatto io.

Quando selezioni i campi nell'area Ripetitore da visualizzare come righe, gli utenti del modulo duplicheranno ogni linea orizzontale.

Front-end view of the Repeater field block

Come puoi vedere sopra, i pulsanti + aggiungi o rimuovi si trovano alla fine di ogni riga.

I Blocchi, invece, sono utili per unire campi da ripetere insieme, che non possono stare in una sola Riga.

Selecting the Repeater field display as Blocks

E con i Blocchi, i pulsanti + aggiungi o – rimuovi si trovano sotto l'intera sezione dei campi. Maggiori informazioni su quei pulsanti, più tardi.

Nel mio esempio qui sotto, ho selezionato Blocchi come modo per visualizzare i miei campi ripetibili. Ho quindi incluso i campi nell'area del campo Ripetitore che desidero che gli utenti possano duplicare come sezione.

Front-end view of Repeater field blocks

Ora, quando gli utenti del modulo aggiungono un altro partecipante, possono fornire tutte le informazioni richieste nel modulo per ciascun Blocco.

In questo modo, gli utenti del modulo possono duplicare intere sezioni del modulo contemporaneamente.

4. Scegli un layout

Successivamente, controlla i diversi modi in cui puoi organizzare il layout dei campi ripetibili.

Selecting the Repeater field layout

Puoi impostare i campi in righe singole, colonne equidistanti e colonne irregolari.

Se disponi di righe ripetibili di nomi ed età dei partecipanti, ad esempio, puoi scegliere un layout che posiziona uno spazio più grande per il nome e uno spazio più piccolo per l'età.

Selecting the Repeater field 2 column layout

Quindi, il mio esempio di righe e colonne di layout nel generatore di moduli sopra apparirà così a un utente del modulo:

Oppure ricordi il Blocco che ti ho mostrato alla fine del passaggio 3 con il Nome del partecipante, le Informazioni di contatto di emergenza e altri campi?

Potrei utilizzare un layout di 2 colonne per personalizzare questa parte del modulo.

Selecting the Repeater field 2 column layout

Quindi, per l'utente sarebbe simile a questo:

Front-end view of the Repeater field 2 column layout

Suggerimento professionale : utilizza un semplice campo Nome di una riga per mantenere le colonne uniformemente distanziate come ho fatto sopra.

La modifica di questi aspetti del campo Ripetitore aiuta solo a mantenere tutto pulito e organizzato nell'intero modulo.

5. Personalizza la visualizzazione dei pulsanti

L'ultima cosa da personalizzare nella sezione del campo ripetitore sono i pulsanti + e – per aggiungere e rimuovere campi ripetibili.

Questi sono i pulsanti su cui l'utente del modulo farà clic per aggiungere nomi, sezioni di registrazione o qualsiasi altro campo che hai reso disponibile per la duplicazione.

Per impostazione predefinita, questi pulsanti mostrano + o – alla fine di ogni riga, ma puoi personalizzare queste icone quando utilizzi un blocco.

Navigating to the Repeater field button settings

Poiché i pulsanti sono alloggiati sotto il blocco anziché alla fine della riga, consentendone l'allungamento attraverso la personalizzazione, mantiene le cose visivamente in ordine.

Innanzitutto, seleziona il Tipo di pulsante .

Selecting the Repeater field button type

Le opzioni qui includono:

  • Pulsanti con icone
  • Pulsanti
  • Icone con testo
  • Icone
  • Testo semplice

Se il tuo pulsante visualizza testo di qualsiasi tipo, puoi personalizzarlo nella casella successiva. Qui è dove puoi cambiare ciò che legge l' etichetta del pulsante .

Customizing the Repeater field button labels

In un modulo di registrazione di gruppo, ad esempio, potresti personalizzare il pulsante per leggere "Aggiungi partecipante".

Infine, puoi scegliere il limite minimo e massimo per i tuoi campi ripetibili.

Setting the Repeater field button limit

Per impostazione predefinita, questo limite è impostato su un minimo di 1 e un massimo di 10. Ciò significa che gli utenti del modulo possono registrare fino a 10 partecipanti su questo modulo.

Pertanto, quando si applicano le impostazioni mostrate sopra, il pulsante nel nostro modulo di registrazione del gruppo apparirà così per gli utenti:

Front-end view of the Repeater field button

Come sempre, quando sei soddisfatto dei campi personalizzati e ripetibili, assicurati di salvare il tuo modulo da pubblicare quando sei pronto.

E questo è tutto! Ora sai come consentire ai visitatori del sito web di duplicare i campi nei tuoi moduli.

Bonus: il campo ripetitore in azione

Ti ho mostrato come utilizzare l'area del campo Ripetitore in un modulo di registrazione di gruppo, ma vorrei condividere un paio di altri buoni esempi di questa funzionalità in azione.

Modulo scheda attività del dipendente

Innanzitutto, dai un'occhiata a questa scheda attività dei dipendenti che offriamo come modello:

Full view of the employee timesheet form template

Per prima cosa vengono raccolti i dettagli dei dipendenti, inclusi il nome, l'e-mail del dipendente, l'ID del dipendente e le ore totali della settimana.

The employee details section of the template

I dipendenti possono quindi inserire i giorni e le ore lavorative specifiche della settimana, utilizzando essenzialmente questo modulo come scheda attività settimanale.

The weekly timesheet section of the form template

Utilizza blocchi e colonne ripetibili che consentono agli utenti di duplicare i campi per il giorno della settimana in cui hanno lavorato, insieme all'orario di ingresso e di uscita di quel giorno. Questi campi possono essere ripetuti fino a 14 volte, ovvero una settimana di doppi turni.

Vuoi utilizzare questo modulo sul tuo sito web? Ottieni il modello!

Modulo elenco classi

Ora, dai un'occhiata a questo elenco di classi che offriamo anche come modello:

Full view of the class roster form template

Inizia raccogliendo le informazioni dell'insegnante per un facile monitoraggio di ogni invio.

The teacher information section of the form template

Quindi, con il campo Ripetitore, gli insegnanti possono aggiungere facilmente informazioni per ogni studente nel proprio elenco, come livello scolastico, compleanno o qualsiasi altro dato che desiderano includere per la tenuta dei registri.

The class roster section of the form template

Gli insegnanti possono utilizzare questo elenco per un massimo di 20 studenti. Oppure, come sempre, questo modello di modulo è totalmente personalizzabile, quindi è possibile modificare il numero massimo di voci consentite.

Ti piace questo modulo? Ottieni il modello!

Perché dovrei consentire ai visitatori di duplicare i campi del modulo?

Fa bene agli utenti del tuo modulo! Consentire ai visitatori di duplicare i campi del modulo rende il processo di compilazione dei moduli molto più semplice, in particolare quando gli utenti devono inserire informazioni simili o ripetitive. Ciò può far risparmiare tempo ai visitatori del tuo sito e rendere la loro esperienza di compilazione dei moduli più comoda ed efficiente.

E fa bene anche a te! Quando gli utenti possono duplicare i campi del modulo, è più semplice raccogliere e organizzare i dati per l'analisi, perché i punti dati simili sono raggruppati e più gestibili.

Inoltre, mantiene semplicemente il tuo modulo organizzato e visivamente accattivante. I visitatori del tuo sito non saranno sopraffatti da lunghe sezioni di campi vuoti e non dovrai creare una scia contorta di regole logiche condizionali per mantenere nascosti i campi aggiuntivi.

Il Repeater Field è una vittoria per tutti!

FAQ

In WPForms siamo sempre entusiasti di offrire indicazioni sulle funzionalità e sugli strumenti che forniamo. Quindi, ecco le risposte ad alcune delle nostre domande più frequenti sulla duplicazione dei campi del modulo:

Cosa significa consentire ai visitatori di duplicare i campi del modulo?

Consentire ai visitatori di duplicare i campi del modulo significa fornire loro la possibilità di creare più istanze di un campo specifico all'interno di un modulo. In questo modo, possono inserire informazioni simili o ripetitive in modo più efficiente.

In WPForms, ci riferiamo a questi duplicati come campi Ripetitore, poiché gli utenti del modulo possono ripetere questi campi per inserire ulteriori informazioni.

Come posso implementare la duplicazione dei campi nei moduli del mio sito web?

I metodi di implementazione possono variare a seconda della piattaforma o degli strumenti che stai utilizzando.

Per quanto riguarda WPForms, abilitiamo la duplicazione dei campi con un semplice clic o un'azione di trascinamento. In altri casi, potrebbe essere necessario utilizzare codice o plugin personalizzati per aggiungere questa funzionalità.

Devo impostare un limite al numero di volte in cui è possibile duplicare un campo modulo?

L'impostazione dei limiti può aiutare a mantenere l'usabilità del modulo e impedire agli utenti di creare un numero eccessivo di campi, il che potrebbe influire sulle prestazioni del modulo o sulla gestione dei dati.

Con il campo WPForms Repeater, puoi impostare un limite massimo per le voci duplicate, in modo da controllare questo aspetto del tuo modulo.

Crea ora il tuo modulo WordPress

Quindi, dai un'occhiata a questa guida semplice e veloce

Ho condiviso alcune informazioni su come consentire ai visitatori di duplicare i campi, ma c'è ancora altro da imparare sull'utilizzo del campo Ripetitore. Questa funzionalità offre così tanto che c'è molto da coprire.

Per apprendere alcuni suggerimenti aggiuntivi facili e veloci, comprese le idee di personalizzazione non trattate qui, assicurati di dare un'occhiata al nostro tutorial sul campo del ripetitore.

Pronto a costruire il tuo modulo? Inizia oggi con il plug-in per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti ha aiutato, seguici su Facebook e Twitter per ulteriori tutorial e guide gratuiti su WordPress.