Riassunto AI
Vuoi aggiungere uno slider numerico ai tuoi moduli WordPress? Un campo Slider Numerico consente ai tuoi utenti di fare clic e trascinare facilmente un selettore per scegliere un valore su una linea numerica.
Questo tutorial ti mostrerà come utilizzare il campo Slider Numerico in WPForms.
Prima di iniziare, assicurati che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza. Quindi puoi creare un nuovo modulo o modificarne uno esistente per accedere al generatore di moduli.
Aggiungere un campo Slider Numerico al tuo modulo
Dopo aver aperto il generatore di moduli, cerca sotto Campi standard per trovare l'opzione Slider Numerico. Fai semplicemente clic su di essa o trascinala nell'area di anteprima per aggiungerla al tuo modulo.
Configurazione delle opzioni del campo Slider Numerico
Una volta aggiunto il campo al tuo modulo, fai clic su di esso nell'area di anteprima per aprire il pannello Opzioni campo. Di seguito, esamineremo ogni impostazione disponibile qui, utilizzando come esempio un modulo di prenotazione per un ristorante.
Etichetta e descrizione
Nelle opzioni del campo Slider Numerico, puoi personalizzare la sua etichetta e descrizione. L'etichetta sarà impostata di default su "Slider Numerico", ma puoi cambiarla in qualsiasi cosa desideri.
Per il nostro esempio di prenotazione al ristorante, cambieremo l'etichetta in "Quante persone ci saranno nel tuo gruppo?".
La descrizione del campo ti dà l'opportunità di aggiungere testo extra al tuo modulo, come istruzioni su come utilizzare lo slider numerico. Puoi inserire qualsiasi testo desideri nel campo fornito.
Valori minimi e massimi
Puoi anche personalizzare i valori minimi e massimi che un utente può selezionare nelle impostazioni Valore. I valori predefiniti saranno da 0 a 10, ma puoi sostituirli con qualsiasi numero intero desideri.
Per il nostro esempio, imposteremo il minimo a 1 persona e il massimo a 20 persone.
Configurazione delle opzioni avanzate dello Slider Numerico
Puoi personalizzare la dimensione del campo, il valore predefinito e il valore di incremento nella scheda Avanzate del pannello delle opzioni del campo. Fai clic su di essa nel generatore di moduli per accedere a queste impostazioni aggiuntive.
Dimensione campo
Per impostazione predefinita, la dimensione del campo è impostata su Media. Tuttavia, hai la possibilità di cambiare la lunghezza del tuo slider in Piccola, Media o Grande.
Di seguito sono riportati esempi di come apparirà ogni dimensione del campo sul frontend del tuo sito:
Valore predefinito
Il Valore predefinito determina dove sarà impostato lo slider quando gli utenti apriranno il tuo modulo. Sarà automaticamente impostato sul valore minimo che scegli nelle opzioni del campo.
Tuttavia, puoi regolarlo a qualsiasi numero intero nell'intervallo del tuo cursore numerico inserendo il valore desiderato nel campo Valore predefinito.
Nota: Per maggiori dettagli sull'impostazione dei valori predefiniti per i campi dei tuoi moduli, consulta il nostro tutorial completo su questa opzione.
Visualizzazione valore
Per impostazione predefinita, l'etichetta sotto il tuo cursore sarà "Valore selezionato: {value}.". Il tag {value} recupera il numero attualmente selezionato dall'utente in modo che possa verificare che sia corretto.
Puoi cambiare ciò che dice l'etichetta in Visualizzazione valore.
Tuttavia, ti consigliamo di lasciare il tag {value} al suo posto in modo che gli utenti possano confermare la loro selezione.
Nota: Vuoi consentire agli utenti di rivedere tutte le informazioni che hanno inserito nel tuo modulo prima di inviarlo? Dai un'occhiata al nostro tutorial su come mostrare le anteprime delle voci in WPForms per tutti i dettagli.
Incremento
Questa impostazione determina la dimensione del passo per ogni aumento della posizione del cursore. Ad esempio, se questa impostazione fosse impostata su 2, ogni aumento aggiungerebbe 2 al valore selezionato (0, 2, 4, 6, ecc.).
Per impostazione predefinita, il valore di incremento sarà impostato su 1. Tuttavia, puoi modificarlo a qualsiasi numero intero desideri nella impostazione Incremento.
Nota: Se scegli di incrementare il tuo valore di un numero pari, ma il tuo valore massimo è dispari (o viceversa), il cursore numerico si fermerà al numero precedente al tuo valore massimo.
Configurare la logica condizionale
Se lo desideri, puoi anche mostrare agli utenti che selezionano un particolare valore un messaggio utilizzando la logica condizionale.
Per il nostro esempio di prenotazione ristorante, mostreremo un messaggio agli utenti che indicano che il loro gruppo sarà composto da più di 10 persone. Nel nostro messaggio, li informeremo che un supplemento automatico del 20% verrà aggiunto al loro conto.
Per impostare questo, aggiungeremo prima un campo HTML al nostro modulo con il testo "Nota: Un supplemento del 20% verrà automaticamente aggiunto al tuo conto per gruppi superiori a 10 persone."
Successivamente, imposteremo la logica condizionale in modo che questo campo HTML appaia solo se un utente sceglie un numero maggiore di 10 utilizzando il cursore numerico. Per fare ciò, fai clic sulla scheda Logica intelligente nel pannello Opzioni campo per il campo HTML e attiva l'impostazione Abilita logica condizionale.
Quindi imposta la regola che determina quando il campo apparirà. Per questo esempio, imposteremo la logica in modo che legga: "Mostra questo campo se Quante persone ci saranno nel tuo gruppo? è maggiore di 10."
Nota: Hai bisogno di aiuto per configurare la tua regola di logica condizionale? Il nostro tutorial per principianti su come usare la logica condizionale in WPForms contiene tutti i dettagli.
Il campo HTML rimarrà nascosto a meno che l'utente non selezioni un valore maggiore di 10 nel campo Cursore numerico.
Ecco fatto! Ora puoi aggiungere e personalizzare un campo Cursore numerico per uno qualsiasi dei tuoi moduli.
Successivamente, vorresti imparare ad analizzare i dati che hai raccolto? Assicurati di consultare il nostro tutorial sull'addon Sondaggi e Quiz per i dettagli su come visualizzare le statistiche delle voci, generare report e altro ancora.