Come aggiungere una maschera di input al codice postale internazionale

Vuoi controllare come gli utenti inseriscono i codici postali nei tuoi moduli di indirizzo internazionali? Una maschera di input può aiutare a standardizzare la formattazione del codice postale limitando quali caratteri possono essere inseriti e in quale schema.

Questa guida ti mostrerà come aggiungere una maschera di input specificamente per il campo del codice postale nel formato Indirizzo Internazionale di WPForms.

Configurazione del tuo modulo

Innanzitutto, creeremo un nuovo modulo e aggiungeremo i campi di cui abbiamo bisogno. Assicurati di includere il campo modulo Indirizzo.

Se hai bisogno di assistenza nella creazione di un nuovo modulo, consulta questa documentazione.

Una volta aggiunto il campo Indirizzo, dal menu a discesa Schema, seleziona Internazionale.

Aggiunta della maschera di input

Per impostazione predefinita, il campo Codice Postale in un Indirizzo Internazionale accetterà qualsiasi carattere. Per limitare l'input a un formato specifico, aggiungeremo una maschera di input personalizzata. Se hai bisogno di aiuto per aggiungere codice personalizzato al tuo sito, consulta la nostra guida su come aggiungere snippet di codice.

Ecco il codice per aggiungere la maschera di input:

Una volta aggiunto lo snippet, vedrai nel campo Codice Postale, quando il campo è attivo, alcune linee che suggeriscono che la maschera di input si aspetta un formato molto specifico da inserire.

Domande frequenti

D: Come posso aggiungere una maschera di input specifica per un indirizzo del Regno Unito?

R: Se sai che il tuo modulo accetterà solo indirizzi del Regno Unito, puoi impostare una maschera di input per il codice postale del Regno Unito con questo snippet.

/*
  * Custom input mask for the address field's international scheme.
  *  
  * @link https://wpforms.com/developers/how-to-add-an-input-mask-to-the-international-postal-code
*/
  
function wpf_dev_address_field_properties( $properties, $field, $form_data ) {
      
    if($field[ 'scheme' ] === 'international') {
  
        $properties[ 'inputs' ][ 'postal' ][ 'class' ][]                  = 'wpforms-masked-input';
        $properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'inputmask-mask' ]   = 'A[A]9[9][A] 9AA';
        $properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'inputmask-greedy' ] = 'false';
        $properties[ 'inputs' ][ 'postal' ][ 'data' ][ 'rule-empty-blanks' ] = true;
  
    }
  
  return $properties; 
  
}
 add_action( 'wpforms_field_properties_address', 'wpf_dev_address_field_properties', 10, 3 )

E questo è tutto ciò che ti serve per impostare una maschera di input sul Codice Postale dell'indirizzo internazionale. Successivamente, vuoi creare uno schema di indirizzo personalizzato? Consulta il nostro articolo su Come Creare Schemi Aggiuntivi per il Campo Indirizzo.

Filtro di Riferimento

wpforms_field_properties