Utilizzo delle maschere di input personalizzate

Desideri richiedere un formato specifico per un campo del modulo? Le maschere di input personalizzate ti consentono di impostare regole per i valori che gli utenti possono inserire in un campo. Questo può essere utile per numeri di telefono internazionali, codici postali e altro ancora.

Questa guida ti mostrerà come creare e aggiungere una maschera di input personalizzata a un campo del modulo.

Prima di iniziare, assicurati che WPForms sia installato e attivato sul tuo sito WordPress. Quindi crea un nuovo modulo o modifica uno esistente.

Aggiunta di una maschera di input personalizzata

Puoi aggiungere una maschera di input personalizzata a qualsiasi campo Testo a riga singola. Dopo aver aggiunto questo tipo di campo al tuo modulo, fai clic su di esso per aprire il pannello Opzioni campo.

All'interno delle opzioni del campo, dovrai fare clic sulla scheda Avanzate. Quindi puoi aggiungere la tua regola al campo Maschera di input.

Maschere di input di base

Per creare le regole per una maschera di input personalizzata, dovrai utilizzare un set specifico di caratteri speciali.

• 9: Numerico (0–9)
• a: Alfabetico (a–z o A–Z)
• A: Alfabetico maiuscolo (A–Z)
• *: Alfanumerico (0–9, a–z o A–Z)
• &: Alfanumerico maiuscolo (0–9 o A–Z)

Ad esempio, se desideri richiedere un numero di 5 cifre, dovresti inserire 5 9 nella casella Maschera di input.

Quando gli utenti fanno clic su questo campo del modulo nel frontend, vedranno un underscore o uno spazio vuoto per ogni carattere richiesto per guidare il loro input. Inoltre, poiché abbiamo utilizzato il simbolo 9, la maschera di input accetterà solo valori numerici (nessuna lettera o altri caratteri).

Puoi anche includere simboli come trattini (-) o parentesi nella tua maschera di input. Ad esempio, potresti utilizzare la seguente maschera di input per richiedere un formato di numero di telefono con il prefisso internazionale USA:

+1 (999)-999-9999

Quando un utente fa clic all'interno di questo campo, vedrà degli spazi vuoti al posto dei 9. Il +1, le parentesi e i trattini vengono inseriti automaticamente nel campo, quindi gli utenti devono solo inserire i numeri.

È importante notare che gli utenti non possono inviare un modulo se hanno compilato parzialmente una maschera di input. Devono inserire il numero e il tipo di caratteri richiesti dalla maschera di input o vedranno un messaggio di convalida che dice: "Compila tutti i campi vuoti."

Tuttavia, l'aggiunta di una maschera di input a un campo non lo rende obbligatorio. Gli utenti possono comunque inviare il modulo se la maschera di input in un campo non obbligatorio è completamente vuota.

Aggiunta di caratteri opzionali alle maschere di input

A volte potresti voler richiedere un formato specifico per un campo, ma anche consentire un numero flessibile di caratteri. Ad esempio, in molti paesi, i numeri di telefono in diverse regioni possono contenere un numero diverso di cifre.

Posiziona eventuali caratteri opzionali tra parentesi quadre, in questo modo:

99 9999-9999[9]

Poiché l'ultima cifra è opzionale, questa maschera di input accetterebbe 10 cifre, come 98 7654-3210, o 11 cifre, come 98 7654-32109.

Esempi aggiuntivi di caratteri opzionali nelle maschere di input

Nome utente con 6-8 lettere (prima lettera maiuscola, le altre minuscole)

• Maschera: Aaaaa[a][a]
• Input di esempio: Sullie o Sulliewp

Codice postale USA con +4 opzionale:

• Maschera: 99999[-9999]
• Input di esempio: 98765 o 98765-4321

Evasione dei caratteri speciali della maschera

A causa dei caratteri speciali che le maschere di input utilizzano per creare formati obbligatori, ci sono certe lettere, numeri e simboli che possono apparire come spazi vuoti quando non intendi che lo facciano.

Per evitare che alcuni dei caratteri speciali della maschera di input vengano convertiti in spazi vuoti nel frontend, puoi semplicemente aggiungere due barre rovesciate (\\) prima del carattere.

Ad esempio, creiamo una maschera di input per un URL di Instagram.

Se inseriamo la maschera di input come https://instagram.com/*{1,30}, tutte le lettere a verranno convertite in spazi vuoti che gli utenti dovranno compilare nel frontend.

Per risolvere questo problema, dobbiamo solo aggiungere una doppia barra rovesciata prima di qualsiasi a che non vogliamo convertire in uno spazio vuoto. Quindi, per questo esempio, inseriremmo la maschera di input come https://inst\\agr\\am.com/*{1,30} nelle opzioni del campo.

Ora, quando visualizzeremo questo campo all'interno del modulo incorporato, gli spazi vuoti appariranno solo dove previsto.

Esempi aggiuntivi di evasione dei caratteri speciali nelle maschere di input

SKU prodotto (2 cifre 9 seguite da 3 numeri aggiuntivi o lettere maiuscole)

• Maschera: \\9\\9-&&&
• Input di esempio: 99-654 o 99-BC8

Indirizzo Gmail

• Maschera: *{1,50}@gm\\ail.com
• Input di esempio: [email protected]

Maschere di input avanzate

Se desideri un controllo ancora maggiore sulle maschere di input del tuo modulo, puoi utilizzare anche le opzioni di formattazione avanzata. Funzionano in combinazione con tutti i caratteri speciali della maschera descritti sopra.

Caratteri ripetuti

Puoi utilizzare uno qualsiasi dei caratteri speciali davanti a {n} (dove n è un valore numerico) per richiedere un carattere ripetuto.

Esempi di maschere di input con caratteri ripetuti

CAP. Sociale con opzione +4

• Maschera: 9{5}[-9{4}]
• Esempi di input: 33409 o 33409-4053

Numero d'ordine di 12 caratteri con numeri e lettere maiuscole

• Maschera: &{12}
• Esempi di input: 29X483HK8192 o 10G7382ZR638

Intervalli flessibili di caratteri

Puoi usare uno qualsiasi dei caratteri speciali davanti a {n,m} (dove n e m rappresentano valori numerici) per consentire agli utenti di inserire un intervallo di caratteri.

Esempi di maschere di input con intervalli flessibili

URL di Facebook (consente 5–50 caratteri):

• Maschera: https://f\\acebook.com/*****[*{0,45}]
• Esempi di input: https://facebook.com/wpforms o https://facebook.com/monsterinsights

Handle di Twitter (consente 4–15 numeri, lettere maiuscole o lettere minuscole)

• Maschera: @****[*{0,11}]
• Esempio di input: @easywpforms o @WPBeginner

Email per un dominio specifico (consente 1–51 caratteri):

• Maschera: *[*{0,50}]@mysite.com
• Esempio di input: [email protected] o [email protected]

SKU del prodotto con 8–11 caratteri (consente numeri o lettere maiuscole):

• Maschera: &{4}-&{4}[&{0,3}]
• Esempio di input: A987-BC65 o A987-BC65D43

Mascheramento per valori di input multipli possibili

Un'altra opzione è creare una maschera di input che accetti più valori di input possibili. Per farlo, inserisci una barra rovesciata seguita dai valori consentiti tra parentesi separati da barre verticali come in \(x|y).

Esempi di maschere che consentono input multipli possibili

Numero di telefono con prefisso internazionale per USA (+1), Australia (+61) o Messico (+52)

• Maschera: +\(1|61|52) 9999999999
• Esempi di input: +1 2127893920 o +52 3307490285

Numero di conto che inizia con TN o KY

• Maschera: \(TN|KY)9{10}
• Esempi di input: TN3756284765 o KY2975387529

Maschere data / ora

Puoi anche usare maschere di input personalizzate per richiedere un formato di data o ora specifico.

Per impostare una maschera di input per data o ora, dovrai iniziare con date: seguito dal formato che desideri richiedere.

Maschere Data

Utilizzando le opzioni seguenti, puoi creare maschere di input data personalizzate che soddisfino le tue esigenze.

• d: Giorno del mese in cifre; nessun zero iniziale per i giorni a una cifra.
• dd: Giorno del mese in cifre; zero iniziale per i giorni a una cifra.
• m: Mese in cifre; nessun zero iniziale per i mesi a una cifra.
• mm: Mese in cifre; zero iniziale per i mesi a una cifra.
• yy: Anno in ultime 2 cifre; zero iniziale per gli anni inferiori a 10.
• yyyy: Anno in 4 cifre

Ad esempio, date:dd/mm/yyyy richiederà una data come 12/08/2021. Quando un utente visita il tuo modulo e passa il mouse sul campo, vedrà dei segnaposto per il formato richiesto.

Maschere Ora

Utilizzando le opzioni seguenti, puoi creare maschere di input ora personalizzate che soddisfino le tue esigenze.

• h: Ore; nessun zero iniziale per le ore a una cifra (orologio 12 ore).
• hh: Ore; zero iniziale per le ore a una cifra (orologio 12 ore).
• H: Ore; nessun zero iniziale per le ore a una cifra (orologio 24 ore).
• HH: Ore; zero iniziale per le ore a una cifra (orologio 24 ore).
• M: Minuti; nessun zero iniziale per i minuti a una cifra. M maiuscola per evitare conflitti con i mesi.
• MM: Minuti; zero iniziale per i minuti a una cifra. MM maiuscola per evitare conflitti con i mesi.
• s: Secondi; nessun zero iniziale per i secondi a una cifra.
• ss: Secondi; zero iniziale per i secondi a una cifra.
• l: Millisecondi. 3 cifre.
• L: Millisecondi. 2 cifre.
• t: Stringa indicatore di ora minuscola, a carattere singolo: a o p.
• tt: Stringa indicatore di ora a due caratteri: am o pm.
• T: Stringa indicatore di ora a carattere singolo: A o P.
• TT: Stringa indicatore di ora a due caratteri: AM o PM.

Ad esempio, date:h:MM consentirà agli utenti di inserire un orario come 8:30. Sul frontend, gli utenti vedranno dei segnaposto nel campo quando ci passeranno sopra il mouse.

Utilizzo di alias per aggiungere maschere di input

Puoi inserire un alias nel campo Maschera di input nelle opzioni avanzate del campo per utilizzare una maschera di input predefinita.

Le maschere di input alias disponibili in WPForms includono:

• alias:numeric: Consente agli utenti di inserire qualsiasi valore numerico.
• alias:currency: Consente agli utenti di inserire valori numerici nel formato 0,00.

• alias:decimal: Consente agli utenti di inserire qualsiasi valore numerico con o senza decimali.
• alias:integer: Consente agli utenti di inserire qualsiasi numero intero.
• alias:percentage: Consente agli utenti di inserire qualsiasi numero da 1 a 100 come percentuale.
• alias:url: Aggiunge una maschera di input per un URL che inizia con http://.
• alias:email: Aggiunge una maschera di input per un indirizzo email.

Domande frequenti

Qui discuteremo alcune delle domande più comuni che riceviamo riguardo alle maschere di input in WPForms.

Non riesco a trovare l'opzione Maschera di input nelle impostazioni del mio campo. Dov'è?

L'opzione Maschera di input è disponibile solo per il campo Testo a riga singola. Non la troverai su altri tipi di campo come Telefono, Email, Numeri o Paragrafo.

Per utilizzare una maschera di input personalizzata, aggiungi un campo Testo a riga singola al tuo modulo, fai clic su di esso per aprire le Opzioni del campo, quindi vai alla scheda Avanzate dove troverai il campo Maschera di input.

L'utilizzo di Limita lunghezza con una maschera di input limiterà l'input dei caratteri nei campi Testo a riga singola?

Sì. Quando aggiungi limiti di caratteri e maschere di input insieme nei campi Testo a riga singola, il limite conta tutto, inclusi simboli come i trattini, come parte del limite. Per assicurarti che gli utenti possano inserire le loro informazioni senza problemi, regola il limite di caratteri per includere questi simboli aggiuntivi.

Per ulteriori informazioni sulla regolazione dei limiti di caratteri, fai riferimento alla nostra guida su limiti di caratteri e parole.

Perché i miei caratteri speciali con escape vengono rimossi dal campo maschera di input?

Per impostazione predefinita, WordPress rimuove le barre rovesciate quando i dati del modulo vengono elaborati. Se stai eseguendo l'escape di caratteri speciali della maschera (come \9 o \*) e noti che scompaiono, puoi preservarli abilitando lo slashing dei dati del modulo.

Per fare ciò, aggiungi la seguente riga al file wp-config.php del tuo sito, appena prima della riga che dice /* That's all, stop editing! */:

define( 'WPFORMS_ENABLE_FORM_DATA_SLASHING', true );

Ci ò garantirà che i backslash vengano mantenuti e che le maschere di input funzionino correttamente. Se non sei sicuro di come modificare il file wp-config.php del tuo sito, consulta la guida di WPBeginner su come modificare il file wp-config.php in WordPress.

Fatto! Ora puoi creare maschere di input personalizzate per richiedere formati specifici nei campi dei tuoi moduli.

Successivamente, desideri rendere i tuoi moduli più compatti? Assicurati di consultare il nostro tutorial su come utilizzare layout a più colonne per imparare ad organizzare i campi in righe nel tuo modulo.