Volete controllare il modo in cui gli utenti inseriscono i codici postali nei vostri moduli di indirizzo internazionali? Una maschera di input può aiutare a standardizzare la formattazione dei codici postali, limitando i caratteri che possono essere inseriti e lo schema.
Questa guida mostra come aggiungere una maschera di input specifica per il campo del codice postale nel formato Indirizzo internazionale di WPForms.
Impostazione del modulo
Per prima cosa, creeremo un nuovo modulo e aggiungeremo i campi necessari. Assicurarsi di includere il campo del modulo Indirizzo.
Se avete bisogno di assistenza per creare un nuovo modulo, consultate questa documentazione.
Una volta aggiunto il campo Indirizzo, dal menu a tendina Schema selezionare Internazionale.
Aggiunta della maschera di input
Per impostazione predefinita, il campo Codice postale di un indirizzo internazionale accetta qualsiasi carattere. Per limitare l'input a un formato specifico, aggiungeremo una maschera di input personalizzata. Se avete bisogno di aiuto per aggiungere codice personalizzato al vostro sito, consultate la nostra guida sull'aggiunta di snippet di codice.
Ecco il codice per aggiungere la maschera di input:
Una volta aggiunto lo snippet, si noterà che nel Codice postale, quando il campo è attivo, appaiono alcune righe 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 si sa che il modulo accetta solo indirizzi del Regno Unito, si può impostare una maschera di input per il codice postale britannico 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 )
Questo è tutto ciò che serve per impostare una maschera di input per l'indirizzo internazionale Codice postale. Si vuole poi creare uno schema di indirizzo personalizzato? Consultate il nostro articolo su Come creare schemi aggiuntivi per il campo indirizzo.