Gli utenti inseriscono i numeri di telefono nei modi più disparati: alcuni iniziano con 8, altri con +7, alcuni digitano le cifre senza spazi, altri aggiungono spazi dopo ogni coppia di cifre. Il database finisce nel caos. I manager perdono tempo a fare chiamate e metà dei numeri risulta inutilizzabile. Uno scenario familiare per chiunque abbia mai aggiunto un modulo di contatto a un sito web.

Una maschera di input risolve completamente questo problema: l'utente non può fisicamente inserire un numero nel formato sbagliato. Digita le cifre e queste appaiono automaticamente al posto giusto, mentre parentesi e trattini compaiono da soli. Nessun errore, nessuna frustrazione.

Ecco quattro modi per aggiungere una maschera per telefono a un input: dal nativo HTML5 senza JavaScript a una libreria completa con bandiere per ogni paese. Con codice che puoi copiare e incollare nel tuo progetto.

💡 Panoramica rapida:

• La maschera più semplice usa l'attributo pattern e type="tel", niente JavaScript, funziona in qualsiasi browser
• Se servono bandiere nazionali e formattazione internazionale, usa intl-tel-input, la soluzione più popolare su GitHub
• Se serve una libreria per telefoni, date, carte e qualsiasi altra maschera, scegli IMask.js
• Se vuoi scrivere una maschera a mano senza dipendenze, JavaScript puro può farlo in 30 righe

Cos'è una maschera di input e perché conta più della validazione

Una maschera di input è una stringa modello che controlla ciò che l'utente vede e può digitare in un campo del modulo. A differenza della validazione, che controlla i dati dopo l'invio e mostra un errore, una maschera agisce in tempo reale durante la digitazione: impedisce di inserire una lettera dove dovrebbe esserci una cifra e inserisce automaticamente parentesi, trattini e spazi.

La differenza è fondamentale. La validazione dice «hai fatto un errore» e l'utente è già frustrato e potrebbe abbandonare. Una maschera lo guida passo dopo passo: gli errori sono semplicemente impossibili. Per i numeri di telefono questo è critico, perché esistono decine di opzioni di formattazione. Solo un numero russo può essere scritto come +7 999 123-45-67, come 8(999)1234567 o come +7(999)123-45-67, e queste sono solo tre varianti tra le tante. Senza una maschera, ogni utente inventa il proprio formato e il database diventa una discarica.

Metodo 1: HTML5, type="tel" e pattern

La strada più semplice: saltare completamente JavaScript. I browser moderni supportano type="tel" e l'attributo pattern, che convalida l'input rispetto a una espressione regolare all'invio del modulo.

Aggiungi il campo al tuo markup. Il codice può essere inserito in qualsiasi template HTML: Contact Form 7, un modulo nativo di WordPress o markup personalizzato.

1
<input
2
  type="tel"
3
  id="phone"
4
  name="phone"
5
  pattern="\+7\s?[\(]?\d{3}[\)]?\s?\d{3}[\-]?\d{2}[\-]?\d{2}"
6
  placeholder="+7 (999) 123-45-67"
7
  title="Enter the number in the format +7 (999) 123-45-67"
8
  required
9
>

Analizziamo cosa succede qui. type="tel" mostra una tastiera numerica sui dispositivi mobili invece della tastiera normale, rendendo più comoda l'immissione del telefono. pattern imposta un'espressione regolare che consente diverse varianti: con o senza spazi, con o senza parentesi attorno al prefisso. title mostra un tooltip al passaggio del mouse e required impedisce di inviare il modulo con il campo vuoto.

Il vantaggio: zero dipendenze, funziona in qualsiasi browser. Per una semplice landing page, questo è sufficiente.

Ma questa non è una vera maschera. Parentesi e trattini non compaiono automaticamente; l'utente deve digitarli a mano. pattern si attiva solo all'invio del modulo. Se hai bisogno di una formattazione in tempo reale durante la digitazione, passa ai metodi successivi.

Metodo 2: intl-tel-input, formato internazionale con bandiere nazionali

intl-tel-input è la libreria JavaScript più popolare per l'input del telefono. Fornisce un campo con un elenco a discesa di bandiere nazionali, formattazione automatica secondo il modello nazionale e validazione del numero. A giugno 2026, la libreria ha oltre 7.800 stelle su GitHub e la versione corrente è la 29.

Installa la libreria via npm (npm i intl-tel-input) o CDN. Il codice qui sotto è per JavaScript vanilla; esistono anche componenti già pronti per React, Vue, Angular e Svelte.

1
<!-- In the <head> of the page -->
2
<link
3
  rel="stylesheet"
4
  href="https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/css/intlTelInput.css"
5
>
6
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/js/intlTelInput.min.js"></script>

L'elemento input e l'inizializzazione vanno nel template dove serve il campo. Per un tema WordPress, aggiungi lo script tramite wp_enqueue_script in functions.php e inserisci il markup nel template appropriato.

1
<input type="tel" id="phone">
2
 
3
<script>
4
  const input = document.querySelector("#phone");
5
  const iti = intlTelInput(input, {
6
    initialCountry: "ru",
7
    separateDialCode: true,
8
    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@29/build/js/utils.js"
9
  });
10
</script>

initialCountry: "ru" imposta la bandiera russa come predefinita. separateDialCode: true sposta il prefisso internazionale fuori dal campo di input: quando l'utente cambia bandiera, il codice viene inserito automaticamente. utilsScript carica le utility di formattazione; senza di esse la libreria funziona comunque, ma i numeri non vengono formattati secondo il modello del paese selezionato.

L'oggetto restituito da intlTelInput() fornisce diversi metodi utili. iti.getNumber() restituisce il numero in formato internazionale E.164, iti.isValidNumber() verifica la validità e iti.setNumber("9991234567") imposta il valore via codice. Per Contact Form 7 servirà uno script personalizzato: trova il campo .wpcf7-tel e collega intlTelInput ad esso.

Vantaggio: una soluzione internazionale completa con formattazione automatica, bandiere, validazione e integrazioni per framework. Svantaggio: la libreria pesa circa 40 KB (gzip), un eccesso per una semplice landing page con un solo campo.

Metodo 3: IMask.js, una maschera universale senza jQuery

IMask.js è una libreria di mascheratura matura scritta in JavaScript puro: niente jQuery, nessun'altra dipendenza. Supporta maschere per telefoni, date, numeri, valute e modelli dinamici. Torna utile quando servono diversi tipi di maschere su un sito: un telefono in un modulo di contatto, una data in un calendario e un importo in un calcolatore. La versione corrente è la 7.1.

Installa via npm (npm i imask) o includi il CDN:

1
<script src="https://unpkg.com/imask"></script>

Una maschera per telefono in tre righe. Il codice può stare in un tag <script> nel footer o in un file JS separato nel tuo tema.

1
const phoneInput = document.getElementById('phone');
2
const maskOptions = {
3
  mask: '+{7} (000) 000-00-00'
4
};
5
IMask(phoneInput, maskOptions);

Sintassi della maschera: +{7} è un prefisso fisso che l'utente non può modificare. 0 rappresenta qualsiasi cifra da 0 a 9. Puoi aggiungere complessità: rendere il prefisso opzionale o cambiare dinamicamente la maschera quando il paese cambia usando il parametro dispatch.

IMask restituisce un oggetto con accesso al valore grezzo: maskRef.unmaskedValue ti darà le sole cifre 79991234567, esattamente ciò che vuoi salvare nel database. Il metodo maskRef.value restituisce la stringa formattata per la visualizzazione. Il classico problema è risolto: le cifre vanno al backend, mentre l'utente vede un numero formattato correttamente.

Vantaggio: una libreria per tutti i casi, valori grezzi già pronti, nessuna dipendenza. Svantaggio: per un singolo campo telefono è più semplice usare intl-tel-input con le bandiere; IMask dà il meglio di sé su moduli con tre-cinque tipi di campo diversi.

Metodo 4: JavaScript puro, una maschera fatta a mano

Se non vuoi includere una libreria per un solo campo, scrivi la maschera in JavaScript puro. Il codice qui sotto gestisce ogni pressione di tasto e inserisce automaticamente parentesi e trattini man mano che le cifre vengono digitate.

Inserisci lo script nello stesso template in cui si trova il campo input o includilo come file separato. Per WordPress, usa wp_enqueue_script con il flag true (nel footer).

1
document.getElementById('phone').addEventListener('input', function (e) {
2
  let value = e.target.value.replace(/\D/g, '');
3
 
4
  if (value.length > 11) {
5
    value = value.slice(0, 11);
6
  }
7
 
8
  let formatted = '+7 (';
9
  if (value.length > 1) formatted += value.slice(1, 4);
10
  if (value.length > 4) formatted += ') ' + value.slice(4, 7);
11
  if (value.length > 7) formatted += '-' + value.slice(7, 9);
12
  if (value.length > 9) formatted += '-' + value.slice(9, 11);
13
 
14
  e.target.value = formatted;
15
});

L'evento input si attiva a ogni modifica del campo: incolla dagli appunti, correzione automatica, cancellazione. La prima riga replace(/\D/g, '') elimina tutto tranne le cifre: lettere e caratteri speciali spariscono all'istante. Poi lo script taglia le cifre in eccesso (un numero russo ha 11 cifre incluso il prefisso internazionale) e costruisce la stringa formattata: prefisso +7, prefisso a tre cifre tra parentesi, tre cifre, due, due, separate da trattini.

Prima di usarlo su un sito live, aggiungi due migliorie. Primo: quando cancelli cifre in mezzo al numero, il cursore potrebbe saltare alla fine del campo; salva la posizione del cursore tramite selectionStart e ripristinala dopo la formattazione. Secondo: per numeri di altri paesi (la Bielorussia ha 12 cifre, il Kazakistan 11 cifre con un prefisso diverso) la logica si complica e a quel punto intl-tel-input è pienamente giustificato.

Vantaggio: 30 righe, controllo totale, zero kilobyte di dipendenze. Svantaggio: la maschera è tagliata su un formato; per progetti multi-paese il codice si gonfierà.

⁉️🤔 Domande frequenti

Perché una maschera è meglio di una semplice validazione?

La validazione si attiva dopo l'invio del modulo: l'utente vede un errore e deve tornare indietro per correggerlo. Una maschera agisce durante la digitazione, rendendo un formato non valido fisicamente impossibile. Meno frustrazione, meno moduli abbandonati. Per i numeri di telefono questo è critico: gli errori nel numero sono una delle ragioni più comuni per cui gli utenti abbandonano un modulo.

Come salvo le sole cifre nel database, senza parentesi e trattini?

Tutte le librerie in questo articolo forniscono valori grezzi: intl-tel-input ha un metodo getNumber() che restituisce +79991234567, IMask.js ha una proprietà unmaskedValue che restituisce 79991234567. Prima di inviare i dati al server, prendi il valore grezzo e salvalo. Mostra la stringa formattata solo nell'interfaccia. Nei moduli WordPress, aggiungi un campo nascosto <input type="hidden" name="phone_raw"> e popolalo via JavaScript prima dell'invio.

La maschera funziona sui dispositivi mobili?

Sì, tutti e quattro i metodi funzionano correttamente su iOS e Android. type="tel" fa apparire la tastiera numerica, il che è comodo. Su Android meno recente (versioni inferiori alla 6) l'evento input potrebbe comportarsi diversamente con la correzione automatica; testa su dispositivi reali. intl-tel-input e IMask.js sono testati dai loro sviluppatori sui browser mobili e non causano problemi.

Posso usare una maschera con Contact Form 7?

CF7 genera campi con classi .wpcf7-tel. Scrivi uno script che trovi questo campo tramite selettore e gli colleghi intl-tel-input o IMask. All'invio del modulo CF7 prende il valore direttamente dal campo, quindi la libreria deve avere il tempo di formattarlo prima. Se usi valori grezzi, intercetta l'evento wpcf7submit e sostituisci i dati in un campo nascosto.

Cosa fare con numeri di paesi diversi sullo stesso sito?

Usa intl-tel-input: l'utente seleziona una bandiera e la maschera passa automaticamente al formato del paese scelto. Per il geotargeting puoi impostare initialCountry: "auto" e la libreria rileverà il paese tramite IP via un servizio esterno. Se ci sono solo due o tre paesi e il tuo budget di dipendenze è minimo, scrivi due maschere in JavaScript puro e passa dall'una all'altra con un pulsante radio «Russia / Kazakistan» sopra il campo.

Quale metodo scegliere per il tuo progetto

La scelta si riduce a tre domande: quanti campi ci sono sul sito, servono le bandiere nazionali e quanto è critica la dimensione del bundle.

Un singolo modulo semplice su una landing page: parti con pattern HTML5. Veloce, niente JavaScript e sul mobile la tastiera passa a quella numerica. Se il sito accetta numeri internazionali, intl-tel-input coprirà tutto: bandiere, formattazione automatica, validazione. Per un negozio online o un SaaS questo è lo standard.

Diverse maschere sul sito (telefono, data, importo, carta): IMask.js ti darà un'API unica per tutti i campi e non richiede jQuery. Stai costruendo un progetto personale e vuoi il controllo totale: 30 righe di JavaScript puro gestiranno i numeri russi senza una sola dipendenza.

Testa come funziona la maschera su un sito live: inserisci un numero con lettere, incolla dagli appunti, prova a cancellare un paio di cifre in mezzo. Il campo deve comportarsi in modo prevedibile in qualsiasi scenario. Quale metodo hai scelto per il tuo progetto? Condividilo nei commenti.