Vous souhaitez contrôler la manière dont les utilisateurs saisissent les codes postaux dans vos formulaires d'adresses internationales ? Un masque de saisie peut aider à normaliser le formatage des codes postaux en limitant les caractères qui peuvent être saisis et leur forme.
Ce guide vous montrera comment ajouter un masque de saisie spécifiquement pour le champ code postal dans le format d'adresse international de WPForms.
Mise en place du formulaire
Tout d'abord, nous allons créer un nouveau formulaire et ajouter les champs dont nous avons besoin. Veillez à inclure le champ Adresse dans le formulaire.
Si vous avez besoin d'aide pour créer un nouveau formulaire, consultez cette documentation.
Une fois que vous avez ajouté le champ Adresse, sélectionnez International dans le menu déroulant Schéma.
Ajout du masque de saisie
Par défaut, le champ Code postal d'une adresse internationale accepte n'importe quel caractère. Pour limiter la saisie à un format spécifique, nous ajouterons un masque de saisie personnalisé. Si vous avez besoin d'aide pour ajouter du code personnalisé à votre site, veuillez consulter notre guide sur l'ajout d'extraits de code.
Voici le code pour ajouter le masque de saisie :
Une fois que vous avez ajouté l'extrait, vous verrez dans le code postal, lorsque le champ est actif, des lignes qui apparaissent, ce qui suggère que le masque de saisie s'attend à ce qu'un format très spécifique soit saisi.
Questions fréquemment posées
Q : Comment puis-je ajouter un masque de saisie spécifique pour une adresse au Royaume-Uni ?
R : Si vous savez que votre formulaire n'acceptera que des adresses britanniques, vous pouvez mettre en place un masque de saisie pour le code postal britannique à l'aide de cet extrait.
/*
* 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 )
C'est tout ce dont vous avez besoin pour configurer un masque de saisie pour l'adresse internationale Code postal. Vous souhaitez ensuite créer un modèle d'adresse personnalisé ? Consultez notre article sur la création de schémas supplémentaires pour le champ d'adresse.