Riassunto AI
Vuoi imparare a creare maschere di input per i moduli del tuo sito?
Essere in grado di personalizzare il modo in cui i dati vengono inseriti nei tuoi moduli WordPress rende l'esperienza utente più semplice e garantisce che i dati corretti vengano inseriti nel tuo modulo ogni volta.
Crea subito il tuo modulo WordPress
In Questo Articolo
Cos'è una maschera di input?
Le maschere di input sono un modo per limitare i caratteri che possono essere digitati in un campo.
Ad esempio, puoi limitare il campo ad accettare solo numeri o testo. Potresti anche voler limitare il numero di caratteri.
Le maschere di input sono ottime per cose come numeri di telefono o nomi utente dei social media che seguono sempre lo stesso formato.
Come funzionano le maschere di input
Le maschere di input utilizzano i seguenti caratteri per creare un modello per i dati che verranno accettati:
- 9 rappresenta qualsiasi numero (0-9)
- a rappresenta qualsiasi lettera minuscola o maiuscola
- A limita i caratteri accettati alle lettere maiuscole
- & limita il campo ai caratteri alfanumerici maiuscoli (0-9 o A-Z)
- * consente l'inserimento di qualsiasi lettera o numero (0-9, a-z o A-Z)
Puoi anche aggiungere cose come trattini o parentesi ( ) nella tua maschera di input. Questo è particolarmente utile quando vuoi che le persone compilino il loro numero di telefono nel modulo del tuo sito.

Se vuoi aggiungere caratteri opzionali, dopo aver già utilizzato le parentesi, dovresti metterli tra parentesi quadre [ ].
Ad esempio, questa maschera di input richiederebbe un minimo di 4 caratteri, ma sarebbero consentite anche voci più lunghe:
**** [***********]
Esempi di maschere di input
Ora che sai cos'è una maschera di input, è ora di dare un'occhiata ad alcuni degli esempi più basilari che puoi utilizzare nei tuoi moduli WordPress.
Codice Postale degli Stati Uniti:
- Maschera:
99999 - Input Utente Esempio: 89023
Codice Postale degli Stati Uniti con Plus Four Opzionale:
- Maschera:
99999 [-9999] - Input Utente Esempio: 89023 o 89023-5678
Nome utente con 6-8 lettere (prima lettera maiuscola, il resto minuscolo):
- Maschera:
Aaaaaa [aa] - Input utente di esempio: Minnie o Minniems
Nome utente X (precedentemente noto come Twitter) con 4-15 numeri o lettere maiuscole/minuscole:
- Maschera:
@**** [***********] - Input utente di esempio: @easywpforms
Per assistenza con i simboli avanzati delle maschere di input, consulta questo tutorial su come aggiungere maschere di input ai tuoi moduli WordPress.
Come creare maschere di input sui campi del modulo
Ora che hai una buona idea di cosa siano le maschere di input, creiamone una.
1. Crea un nuovo modulo WordPress
La prima cosa che dovrai fare è installare e attivare il plugin WPForms. Per maggiori dettagli, segui questa guida passo passo su come installare un plugin in WordPress.
Successivamente, dovrai creare un nuovo modulo. Consigliamo di utilizzare il Modulo di Contatto Semplice come punto di partenza facile per i test.

2. Aggiungi un campo di testo a riga singola
Per aggiungere una maschera di input al tuo modulo di contatto, dovrai aggiungere un campo modulo Testo a riga singola.
Trascina il campo del modulo dal pannello di sinistra sull'anteprima del modulo.

Una volta fatto ciò, fai clic sul campo del modulo sul lato destro per aprire il pannello Opzioni campo.

Fai clic sulla scheda Avanzate. Qui definirai la tua maschera di input personalizzata.
Nel nostro esempio, chiederemo alle persone che compilano il nostro modulo di inserire il loro CAP degli Stati Uniti:

Questa maschera limiterà il campo in modo che accetti solo 5 numeri.
Fai clic su Salva.
3. Aggiungi il tuo modulo al tuo sito
Ora che il modulo di contatto è personalizzato con una maschera di input, è ora di incorporare il modulo sul tuo sito web.
Fai clic sul pulsante Incorpora e scegli la posizione per il tuo modulo.

Successivamente, pubblica il tuo post o la tua pagina in modo che il tuo modulo di contatto appaia sul tuo sito. Dai un'occhiata:

Nota i trattini bassi che guidano l'utente a completare l'inserimento del CAP.
Crea subito il tuo modulo WordPress
Successivamente, prendi il controllo delle richieste del modulo
Ed ecco fatto! Ora sai come creare maschere di input per i moduli del tuo sito.
Se stai cercando altri modi per controllare il funzionamento dei tuoi moduli, consulta queste risorse:
- Limita le voci del modulo in base alla data con questa semplice guida al componente aggiuntivo Form Locker
- Impedisci ai visitatori minorenni di compilare i tuoi moduli con un plugin di verifica dell'età.
Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più facile. 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.

Posso definire una lunghezza minima/massima ad esempio per un campo a riga singola e questo verrà convalidato correttamente?
Ciao Christian,
Attualmente non abbiamo un'opzione integrata per questo, anche se se sei disposto a scrivere del codice personalizzato, abbiamo una documentazione per sviluppatori sull'impostazione di un limite massimo di caratteri.
E se volessi provare, ecco il nostro tutorial aggiuntivo su come aggiungere codice personalizzato come questo al tuo sito.
Spero che questo aiuti! :)
Cosa succede se non hai un campo chiamato Maschera di input? Non c'è niente sotto il campo Classi CSS nelle Opzioni avanzate?
Ciao Dianne,
Mi scuso per qualsiasi problema con questo! Quando aggiungi una maschera di input, assicurati di utilizzare un campo Testo a riga singola (questo è attualmente l'unico tipo di campo che consente maschere di input). Inoltre, questa è una funzionalità più recente, quindi assicurati che il tuo plugin WPForms sia completamente aggiornato.
Se provi questo e ancora non vedi le opzioni che ti aspetti, ti preghiamo di contattarci in modo che possiamo assisterti ulteriormente. Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi ti preghiamo di inviare un ticket di supporto.
Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Ciao, in questo articolo: https://wpforms.com/docs/how-to-use-custom-input-masks/
Usi la maschera di input di esempio per un indirizzo email a "mysite.com"
Maschera: *[*{0,50}]@mysite.com
Esempio di input: [email protected] o [email protected]
Ma cosa succede se il tuo sito web ha la lettera "a"? Ad esempio...
Utilizzando questa maschera di livello: *[*{0,50}]@mydomain.com
renderà effettivamente un campo che ha uno spazio vuoto per la "a" in domain.
Esempio di input: _______@mydom_in.com
Come posso formattare la maschera di livello in modo che l'intera stringa "mydomain.com" rimanga intatta?
Grazie in anticipo per il tuo aiuto!
Ciao Re,
Mi dispiace per il problema! Ho replicato il problema che hai descritto e l'ho condiviso con il nostro team per lavorare a una soluzione. Grazie per avercelo fatto sapere in modo che possiamo risolverlo! :)
Ciao. Voglio usare lo strumento maschera di input per limitare l'inserimento di caratteri in alcuni dei miei campi.
Sto usando questa maschera: *[*{0,30}].
Tuttavia, non include gli "spazi" come carattere.
Quale maschera di input posso usare per includere gli spazi come carattere nel mio limite di 30 caratteri?
Ciao Alicia,
Le nostre maschere di input attualmente non forniscono un requisito di "spazio" in questo modo. Invece, potresti considerare di utilizzare un po' di codice personalizzato per aggiungere questo limite di caratteri invece (ecco il nostro documento con i dettagli).
Il codice in quel documento conterà gli spazi come caratteri, quindi dovrebbe funzionare più come quello che hai in mente.
E nel caso possa essere d'aiuto, ecco come aggiungere codice personalizzato come questo al tuo sito.
Spero che questo aiuti! 🙂
Sto riscontrando lo stesso problema di RE CARLSON
—
Ma cosa succede se il tuo sito web contiene la lettera "a"?
—
Hai una soluzione per questo?
Grazie.
Ciao Allan,
Ho buone notizie: abbiamo una soluzione per questo 🙂
Per aggiungere una "a" senza trasformarla in parte dell'area di input, puoi usare l'escape con `\\`. Ad esempio, se inserissi questa come maschera di input: `this is \\a test aaa`, risulterebbe: "this is a test ___".
Quindi assicurati di anteporre quella doppia barra rovesciata a qualsiasi A, a o 9 che desideri mantenere così com'è (senza convertirla in _).
Spero che questo aiuti! 🙂
ciao,
Ho bisogno di alfanumerici maiuscoli (0-9 o A-Z) da combinare con spazi tra i caratteri. Apparentemente "&" non consente spazi
Ciao Elyas,
Non abbiamo un carattere speciale per consentire gli spazi; invece, puoi semplicemente aggiungere uno spazio tra i caratteri & che desideri, in modo da poter avere il campo della maschera di input come "&&&& &&&&".
Spero che questo aiuti! 🙂
Come posso fare in modo che il campo accetti solo numeri compresi nell'intervallo 6-9 all'inizio? Sto usando WPForms Basic acquistato.
Esempio
7898981226
8985607458
9989878774
Ciao Munaf!
Puoi creare una maschera di input personalizzata per il campo Testo a riga unica, tuttavia, non esiste un'opzione integrata per utilizzare l'intervallo di numeri lì.
Quindi puoi averla così, ad esempio, "\\799999" e consentirà solo "7" all'inizio e poi altri 5 cifre qualsiasi, ma purtroppo non abbiamo regole per scegliere 7 OPPURE 8 OPPURE 9 lì all'inizio.
E nel caso possa essere d'aiuto, abbiamo un altro ottimo tutorial su come utilizzare la maschera di input personalizzata in WPForms qui
Mi scuso per qualsiasi confusione!
Buona giornata 🙂
Sto iniziando a usare WPFroms ancora gratuitamente per testare la compatibilità con soluzioni che ho già implementato, tuttavia cercando di personalizzare una maschera semplice suggerita da voi come "https://www.f\\acebook.com/*{1,22}" in un campo "testo di riga unica" mi accorgo che non sono accettati caratteri speciali semplici come ? . o / ; questa è una limitazione voluta imposta agli utenti gratuiti o potreste indicarmi con quale simbolo dovrei sostituire l'* per consentire l'inserimento di caratteri speciali nella maschera.
Ciao Rodrigo,
Mi scuso ma non ho capito bene la tua domanda. Quando hai un momento, puoi chiarire o se stai usando il nostro plugin gratuito, WPForms Lite, visita i forum di supporto dove offriamo supporto limitato gratuito.
Grazie! :)
Ciao è possibile aggiungere una virgola ogni 3 cifre? ad esempio 99.999.999
Ciao Waqas - Se hai un numero fisso di cifre, allora è fattibile. Ad esempio, questa maschera di input mostrerà 9 cifre e una virgola ogni 3 cifre 999.999.999
Spero che questo aiuti!
Come posso consentire caratteri speciali nella mia maschera di input?
Ciao Afif – Abbiamo alcuni tutorial avanzati sulle maschere di input in questo articolo che spiegano come aggiungere alcuni caratteri.
Per ulteriore aiuto, scrivici al supporto in modo che possiamo assisterti. Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi invia un ticket di supporto. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie :)
Non voglio caratteri illegali nel mio campo di testo a riga singola
Ciao Rahul – Ti suggerisco di dare un'occhiata a questo tutorial su come limitare i caratteri speciali nei campi del tuo modulo.
Spero che questo aiuti!
Come posso consentire 15 lettere o meno nella mia maschera di input?
Ciao Yusuf - Per creare le regole per una maschera di input personalizzata, dovrai utilizzare un set specifico di simboli. (Ricorda di aggiungere il simbolo appropriato 15 volte.)
Spero che questo aiuti! :)
Ciao, le mie maschere di input sembrano non funzionare più, i campi di testo consentono di scrivere qualsiasi cosa anche se le maschere sono attive. Qualche aiuto per favore? grazie.
Ciao Antonio - Mi dispiace per questo! Saremo felici di aiutarti.
Se hai una licenza WPForms, hai accesso al nostro supporto via email, quindi ti preghiamo di inviare un ticket di supporto. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite su WordPress.org.
Grazie! :)
Ciao,
Sto creando un campo nome con testo a riga singola e dovrebbero essere aggiunti solo alfabeti e spazi. Per questo, ho aggiunto una maschera di input come a{1,50}. Questo accetta alfabeti, ma gli spazi non possono essere aggiunti, per favore dammi una soluzione per questo.
Ciao Amrita! Mi scuso, ma le maschere di input non sarebbero adatte per questo tipo di caso d'uso, poiché sono destinate a fornire una struttura specifica all'input, ad esempio un numero di telefono o un numero di identificazione. Gli spazi non potrebbero essere utilizzati in una maschera di input.
Per fare ciò che stai cercando sarebbe necessaria una codifica personalizzata (solitamente jQuery o JavaScript), tuttavia mi scuso in quanto non siamo in grado di fornire supporto per questo livello di personalizzazione. Questo thread potrebbe darti qualche idea.
Mi dispiace che non siamo in grado di fornire una soluzione per questo, ma se hai ulteriori domande, ti preghiamo di contattarci se hai un abbonamento attivo. Se non ne hai uno, non esitare a porci alcune domande nei nostri forum di supporto.
Ciao ragazzi
come creo una maschera in questo modo?
+55 (99) 9 9999-9999 o +55 (99) 9999-9999 sullo stesso input.
grazie,
Ciao! Sembra che tu abbia pubblicato questa domanda in più articoli, quindi la tratterò in un'unica sede qui.
Mi scuso ma non è possibile specificare dove verrebbe posizionato il numero opzionale, poiché la maschera di input opera in base alla sequenza in cui vengono inseriti. Tecnicamente, il numero opzionale potrebbe essere mantenuto opzionale, ma ciò significherebbe che i tuoi utenti dovrebbero "saltare" quel carattere inserendo uno spazio in quella posizione del carattere, e poi continuare a compilare il resto del campo.
Dovrebbe essere possibile con un po' di codifica personalizzata, tuttavia mi dispiace che tali personalizzazioni siano al di fuori dell'ambito del nostro supporto. Nel caso in cui desideri esplorare opzioni di sviluppo personalizzato, ti consigliamo vivamente di utilizzare Codeable. Codeable esamina tutti gli sviluppatori per assicurarsi che siano altamente qualificati e comunicativi, e poi aiuta anche a guidare l'intero processo di connessione e comunicazione con uno sviluppatore più adatto.
Ecco il nostro tutorial sull'utilizzo di Codeable, che fornisce maggiori dettagli su come funziona questo processo.
Oppure, se desideri un team a cui puoi continuare a rivolgerti (a lungo termine) per assistenza allo sviluppo personalizzato, potresti anche prendere in considerazione WPBuffs.
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.
L'elemento del numero di telefono non offre maschere di input, è possibile questa funzionalità?
Ci piace poter utilizzare le maschere di input sull'elemento del numero di telefono perché offre il selettore del prefisso internazionale, mentre un normale campo di testo no (anche se offre maschere di input).
Grazie,
Mark
Ciao Mark,
Non abbiamo una funzionalità integrata per impostare la maschera personalizzata per il campo Telefono. Tuttavia, questo può essere ottenuto utilizzando il campo Testo a riga singola e impostando la maschera di input personalizzata come mostrato qui
Spero che questo aiuti! :)
È possibile richiedere un input decimale nel campo numerico?
Quindi un utente è sempre tenuto a inserire numeri interi + x cifre decimali?
Ad esempio:
0.015
0.792
0.28
1.256
Ciao, credo che questo dovrebbe essere possibile utilizzando la seguente Maschera di Input su un campo di testo a riga singola: [99.999] ed ecco lo screencast che dimostra la stessa.
Spero che questo aiuti!
qualcuno sa come fare la maschera della moneta in wpforms esempio: $1,252.33
Ciao Cristian – puoi usare la seguente maschera di input per ottenerlo: $ [[9],999.99].
Spero che questo aiuti!
Voglio creare una maschera di input per EMP2000 come posso farlo
Ciao Kashmira – puoi usare la seguente maschera di input per ottenerlo:EMP2[9999].
Spero che questo aiuti!
Ciao! Come posso creare una maschera di input per un importo opzionale
ad esempio $1.000.000 o $250.000 aggiungendo una virgola in mezzo a seconda dell'importo?
Ciao Mariana, sfortunatamente, non abbiamo un'opzione integrata per il formato opzionale con maschera di input come hai descritto. Concordo sul fatto 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 e buona giornata!
C'è un modo per verificare la correttezza del numero di identificazione del veicolo (VIN)?
Ciao Litschi – Puoi sicuramente creare una maschera di input personalizzata per convalidare il formato corretto del numero di identificazione del veicolo (VIN).
Grazie :)
Ciao – posso usare una maschera di input per NON consentire gli spazi?
ad esempio, se un utente digita "AA 9999" la maschera forzerà "AA9999"?
O uno spazio finale/iniziale come "AA9999[_]" diventerà "AA9999" senza lo spazio?