come-creare-un-modulo-con-un-cursore-di-intervallo-numerico_b

Come aggiungere un cursore di intervallo numerico nei moduli di WordPress (gratuito)

I cursori di intervallo numerico in un modulo hanno un aspetto davvero accattivante e questo di per sé è un beneficio importante poiché i visitatori sono più propensi a fidarsi di te se stai utilizzando moduli visivamente impressionanti che riflettono professionalità.

Inoltre, i cursori di intervallo numerico aggiungono un maggiore livello di interattività ai tuoi moduli. L'interattività crea coinvolgimento, e sono i tuoi visitatori coinvolti che alla fine si convertono.

Quindi, come si aggiunge un cursore di intervallo numerico nei tuoi moduli WordPress? Ti guiderò attraverso il modo più semplice per ottenerlo proprio qui.

Crea ora un modulo con cursore di intervallo numerico

Cos'è un cursore di intervallo di WordPress?

Un cursore di intervallo di WordPress è un campo modulo che consente alle persone di scegliere un numero trascinando una maniglia lungo una traccia invece di digitarlo.

Imposti i valori più bassi e più alti accettati dal campo, e il tuo visitatore sceglie un numero qualsiasi all'interno di quell'intervallo. Questa piccola modifica fa alcune cose utili:

  • Campi completati più frequentemente: Trascinare è più veloce che digitare, quindi è meno probabile che le persone lascino il campo vuoto o lo saltino.
  • Risposte di migliore qualità: Ottieni una cifra reale invece di una stima vaga, il che rende il cursore uno strumento di generazione di lead veramente utile quando effettui il follow-up.
  • Funziona sui telefoni: Una maniglia del cursore è più facile da colpire su un touchscreen rispetto a un campo di immissione numerico, e ha un aspetto corretto su qualsiasi tema WordPress tu stia utilizzando.
  • Niente da imparare: Il tuo visitatore trascina a sinistra o a destra, quindi non c'è un formato da sbagliare né un errore di convalida da incontrare.

WPForms chiama questo campo Number Slider e si trova nel gruppo Standard Fields del costruttore di moduli. Segui i passaggi seguenti per iniziare:

Come aggiungere un cursore di intervallo numerico in WordPress

Passaggio 1: Installa il plugin WPForms

Il modo più semplice per inserire un cursore di intervallo numerico nel tuo modulo è utilizzare WPForms, che è il plugin per moduli WordPress più adatto ai principianti, dotato di una tonnellata di funzionalità avanzate per la creazione di moduli.

Ciò che mi piace di più di WPForms è che offre un campo nativo Number Slider. Lo trascini, imposti un minimo e un massimo, e l'etichetta sotto la traccia inizia a riportare il valore selezionato da sola.

Mentre puoi usare WPForms Lite (la versione gratuita) per creare un modulo con il cursore di intervallo numerico, userò WPForms Pro per questo tutorial perché questo apre tonnellate di possibilità aggiuntive per utilizzare il campo cursore in modi entusiasmanti.

La homepage di WPForms

Se non sai come installare il plugin, fai clic su questa guida per le istruzioni di installazione di WPForms. Ci vorranno solo pochi minuti. Quando WPForms sarà pronto sul tuo sito, potrai iniziare a creare un modulo con il cursore numerico.

Crea ora il tuo modulo WordPress

Passaggio 2: Crea un modulo semplice

Dal tuo pannello di controllo WordPress, vai su WPForms » Aggiungi Nuovo per creare un nuovo modulo.

Aggiungi nuovo modulo

Immediatamente, vedrai apparire la schermata di configurazione del modulo nella tua finestra. Qui puoi inserire un nome per il tuo modulo e selezionare un modello.

Puoi costruire il tuo modulo interamente da zero (iniziando con un modello vuoto), oppure puoi utilizzare un modello già pronto per rendere le cose ancora più veloci per te.

Per questo post, userò il modello Modulo di Contatto Semplice per dimostrare come puoi lavorare con un modello per inserire campi aggiuntivi come il cursore numerico.

Usa il modello di modulo di contatto semplice

Dopo aver selezionato il modello, verrai portato all'interfaccia del costruttore di moduli dove potrai procedere all'incorporamento del modulo direttamente sul tuo sito o personalizzarlo ulteriormente.

Modulo di contatto semplice

Nel prossimo passaggio, esploreremo il campo del cursore di intervallo numerico e le sue impostazioni associate.

Passaggio 3: Aggiungi un cursore di intervallo numerico

Ora procediamo e aggiungiamo un cursore di intervallo numerico al tuo modulo. Puoi semplicemente trascinare il campo Number Slider dal menu Standard Fields sulla sinistra al tuo modulo sulla destra.

Campo slider numerico

Per modificare alcune delle impostazioni e del comportamento di questo campo, fai clic sul Cursore Numerico che hai appena aggiunto. Vedrai ora le sue Opzioni Campo apparire nel riquadro di sinistra.

Opzioni del campo slider numerico

Queste opzioni ti consentono di modificare:

  • Etichetta – Usala per aggiungere un nome che rappresenti la quantità controllata dal cursore.
  • Descrizione – Questo aiuta a fornire un contesto aggiuntivo, se necessario.
  • Valore – Imposta i valori minimi e massimi selezionabili per il cursore.
  • Valore predefinito – Questo è il valore che il campo assumerà quando il modulo viene caricato per la prima volta.
  • Incremento – Consente di scegliere l'entità dell'incremento tra ogni valore selezionabile.

Suggerimento Pro:

Se hai WPForms Pro, puoi usare il campo Number Slider anche per i calcoli. Questo modello di calcolatore di sconti all'ingrosso è un ottimo esempio.

Da lì puoi trasformarlo in un modulo di calcolo completo per costi di spedizione, pagamenti di mutui o qualsiasi altra cosa che richieda calcoli in tempo reale.

Infine, puoi aggiungere qualsiasi campo aggiuntivo al tuo modulo con slider numerico trascinandoli dal lato sinistro al lato destro.

Quando hai finito di personalizzare il tuo modulo con slider numerico, fai clic su Salva nell'angolo in alto a destra.

Passaggio 4: Configura le notifiche e le conferme del modulo

WPForms ti invia automaticamente una notifica ogni volta che il tuo modulo viene inviato. Puoi personalizzare le notifiche del modulo andando su Impostazioni » Notifiche.

Notifiche modulo

Qui, puoi scegliere i destinatari della tua notifica (che può essere la tua email admin, la persona che invia il modulo o qualsiasi altra email codificata che desideri inserire). Gli utenti di WPForms Basic e versioni superiori possono anche creare notifiche modulo multiple.

Già che ci sei, ti consiglio anche di controllare le conferme del tuo modulo. La conferma appare immediatamente dopo l'invio di un modulo. Questa potrebbe essere semplice come un messaggio o un reindirizzamento a una pagina diversa a seconda della tua strategia. Puoi personalizzare le conferme andando su Impostazioni » Conferme.

Conferme

Puoi quindi selezionare il tipo di conferma (Messaggio, Mostra Pagina, Reindirizza a URL) che desideri e inserire il messaggio e altri dettagli secondo necessità.

Impostazioni di conferma

Al termine, premi di nuovo Salva nella parte superiore del costruttore di moduli. È ora di incorporare il tuo modulo!

Passaggio 5: Aggiungi il tuo modulo con cursore di intervallo numerico al tuo sito

Dopo aver creato il tuo modulo, devi aggiungerlo al tuo sito web WordPress. WPForms ti consente di aggiungere i tuoi moduli in molte posizioni sul tuo sito web, inclusi i tuoi post del blog, pagine e persino i widget della barra laterale.

Diamo un'occhiata all'opzione di posizionamento più comune: l'incorporamento in pagine/post. Per iniziare, fai clic sul pulsante Incorpora nella parte superiore del generatore di moduli.

Incorpora modulo

Successivamente, vedrai una finestra modale che ti chiederà se desideri incorporare questo modulo in una nuova pagina o in una esistente. Andiamo con quest'ultima opzione e facciamo clic su Crea Nuova Pagina.

Dai un nome alla tua pagina e poi premi il pulsante Iniziamo. Ti troverai all'interno dell'editor a blocchi di WordPress con il modulo incorporato.

Pubblica modulo

Se vuoi, puoi stilizzare il tuo modulo usando l'editor a blocchi senza alcun codice. Quando sei pronto, premi il pulsante Pubblica per rendere live la tua pagina con il modulo incorporato.

Ora sarai in grado di vedere il tuo modulo con slider di intervallo sul tuo sito web, e i visitatori potranno iniziare a usarlo subito, senza alcun problema.

Modulo Slider Numerico pubblicato

Per visualizzare le voci del modulo dopo che sono state inviate, consulta questa guida completa alle voci del modulo. Ad esempio, puoi visualizzare, cercare, filtrare, stampare ed eliminare qualsiasi voce del modulo.

Ed ecco fatto! Ora sai come creare un modulo con slider numerico in WordPress usando il plugin WPForms in modo da poter facilmente ottenere submission dettagliate dai visitatori del tuo sito web!

Domande frequenti sui cursori di intervallo di WordPress

Un range slider di WordPress solleva ogni volta la stessa manciata di domande, principalmente su cosa copre la versione gratuita e dove si trovano i limiti del campo. Queste sono quelle che emergono più spesso.

Il cursore numerico è gratuito in WPForms?

Sì, il Number Slider è un Campo Standard, quindi è incluso in WPForms Lite senza costi e non necessita di alcun addon separato.

Hai bisogno di una licenza a pagamento solo per ciò che costruisci attorno ad esso, in particolare la logica condizionale a partire da Basic in su e i calcoli a partire da Pro.

Posso impostare un valore iniziale predefinito per lo slider?

Puoi farlo, e l'impostazione si chiama Valore Predefinito, si trova nella scheda Avanzate delle opzioni del campo. Corrisponde al tuo valore minimo finché non lo cambi, quindi digita qualsiasi numero intero all'interno del tuo intervallo per spostare la posizione di partenza.

Posso far sì che lo slider si agganci a incrementi specifici?

È esattamente a questo che serve l'impostazione Incremento, poiché controlla la dimensione del passo tra un valore selezionabile e il successivo.

Un incremento di 5 su uno slider da 0 a 100 ti dà 0, 5, 10 e così via. Assicurati solo che il tuo incremento divida equamente il tuo intervallo, altrimenti la manopola si fermerà prima del tuo massimo.

Come visualizzo il valore attualmente selezionato accanto allo slider?

L'impostazione Visualizzazione Valore nella scheda Avanzate gestisce questo, ed è attivata per impostazione predefinita. Il testo dice Valore Selezionato: {value}, dove {value} si aggiorna in tempo reale mentre il visitatore trascina la manopola.

Puoi riscrivere il testo attorno a quel segnaposto come preferisci, ed è così che aggiungi un simbolo di valuta o un'etichetta di unità.

Posso usare un cursore di intervallo con due manopole per un minimo e un massimo?

Non con un singolo campo, perché il Number Slider ha una sola manopola e tu definisci l'intervallo su cui si muove.

Se hai bisogno che il tuo visitatore selezioni un intervallo, aggiungi due campi Number Slider etichettati come Minimo e Massimo. Entrambi i valori vengono salvati separatamente nell'invio, quindi sono facili da leggere e da utilizzare in seguito.

Il cursore numerico supporta i decimali?

No, il campo funziona solo con numeri interi, e questo vale per il valore minimo, massimo, predefinito e l'incremento.

Quando hai bisogno di precisione decimale, usa invece il campo Numeri. Ha un'impostazione Intervallo per i valori minimi e massimi, e il tuo visitatore digita la cifra piuttosto che trascinarla.

Come posso personalizzare l'aspetto del mio slider?

La traccia dello slider e la manopola prendono il colore dal tuo pulsante di invio, insieme alla barra di avanzamento e ai pallini delle opzioni radio, il che mantiene tutto nel modulo visivamente coerente.

Quindi cambiare il colore del pulsante di invio nelle opzioni di stile dell'editor a blocchi cambia anche il tuo slider. Puoi anche passare la Dimensione campo tra Piccola, Media e Grande, e modificare l'etichetta dal costruttore del modulo.

Successivamente, crea un modulo calcolatore con il tuo cursore

Il passo logico successivo è mettere quello slider al lavoro all'interno di una formula, in modo che il prezzo si muova in tempo reale mentre il tuo visitatore prende la sua decisione.

Questo è il motivo per cui la maggior parte delle persone aggiunge uno slider a un modulo in primo luogo, e trasforma un campo di raccolta dati in uno di vendita.

Se preferisci puntare lo slider verso il feedback piuttosto che verso i prezzi, questi esempi di sondaggi NPS mostrano come una scala da 0 a 10 funzioni come domanda di soddisfazione e cosa fare con le risposte che ricevi.

Aggiungi subito uno slider di intervallo numerico al tuo modulo

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin 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 è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.

Divulgazione: i nostri contenuti sono supportati dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Scopri come viene finanziato WPForms, perché è importante e come puoi supportarci.

Hamza Shahid

Hamza è uno scrittore per il team di WPForms, specializzato anche in argomenti relativi al marketing digitale, alla cybersecurity, ai plugin WordPress e ai sistemi ERP. Scopri di più

Il miglior plugin per la creazione di moduli drag and drop per WordPress

Facile, veloce e sicuro. Unisciti a oltre 6 milioni di proprietari di siti web che si affidano a WPForms.

12 commenti su “Come aggiungere uno slider di intervallo numerico nei moduli WordPress (Gratuito)

    1. Ciao Qasim! Puoi modificare i valori del tuo cursore numerico in Opzioni campo > Opzioni avanzate > Visualizzazione valore. Maggiori dettagli in merito sono disponibili nella nostra documentazione.

      Spero che questo aiuti a chiarire 🙂 Se hai ulteriori domande in merito, ti preghiamo di contattarci se hai un abbonamento attivo. In caso contrario, non esitare a porci alcune domande nei nostri forum di supporto.

  1. Ciao, ho aggiunto un cursore al mio modulo, il problema è che il valore non viene visualizzato quando lo aggiungo al mio sito, quindi le persone che usano il modulo dovranno indovinare se usano il cursore, cosa sto sbagliando??

    1. Ciao John, mi dispiace per il problema che stai riscontrando! Saremo felici di aiutarti! Quando hai un momento, scrivici in supporto in modo che possiamo assisterti.

      Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi ti preghiamo di inviare un ticket di supporto. In questo modo potremo discutere maggiori dettagli e indagare ulteriormente. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.

      Grazie :)

    1. Ciao Wayne, al momento non abbiamo l'opzione per stilizzare il cerchio del cursore numerico. Concordo che sarebbe molto utile, però. Ho preso nota della richiesta di funzionalità e la terremo in considerazione mentre pianifichiamo la nostra roadmap per il futuro.

      Grazie!

  2. Ho provato in molti modi, ma ho fallito. Qualcuno può dirmi come posso aggiungere una validazione extra al cursore numerico?
    Non voglio usare un limite, voglio una funzione di validazione personalizzata per tutti i moduli sul mio sito web. non un singolo modulo e un singolo ID campo. Ho bisogno di ottenere l'ID campo dinamicamente se uso il hook wpforms_process.
    Qualche idea?

  3. Ciao,

    Quando il modulo viene inviato, i valori dello slider che erano da 1 a 9 vanno come segue:

    es.
    1 (1 min / 9 max)

    Vogliamo mostrare solo il valore selezionato che era 1, NON i valori minimo e massimo (1 min / 9 max) nell'email.

    1. Ciao Waheed – mi dispiace sentire del problema.

      Ho appena provato da parte mia e sto ottenendo solo il valore selezionato come questo. Per assisterti ulteriormente, se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi per favore invia un ticket di supporto.

      Grazie :)

Aggiungi un commento

Siamo lieti che tu abbia scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra normativa sulla privacy e tutti i link sono nofollow. NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.

Questo modulo è protetto da Cloudflare Turnstile e si applicano la Normativa sulla privacy e i Termini di servizio di Cloudflare.