Comment ajouter un masque de saisie au code postal international

Vous voulez contrôler la façon dont les utilisateurs saisissent les codes postaux dans vos formulaires d'adresses internationales ? Un masque de saisie peut aider à standardiser le format des codes postaux en limitant les caractères qui peuvent être saisis et leur modèle.

Ce guide vous montrera comment ajouter un masque de saisie spécifiquement pour le champ code postal dans le format d'adresse internationale de WPForms.

Configuration de votre formulaire

Tout d'abord, nous allons créer un nouveau formulaire et ajouter les champs dont nous avons besoin. Assurez-vous d'inclure le champ de formulaire Adresse.

Si vous avez besoin d'aide pour créer un nouveau formulaire, veuillez consulter cette documentation.

Une fois que vous avez ajouté le champ Adresse, dans le menu déroulant Schéma, sélectionnez International.

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 allons ajouter un masque de saisie personnalisé. Si vous avez besoin d'aide pour ajouter du code personnalisé sur votre site, veuillez consulter notre guide sur l'ajout de snippets de code.

Voici le code pour ajouter le masque de saisie :

Une fois que vous ajoutez le snippet, vous verrez dans le champ Code postal, lorsque le champ est actif, des lignes apparaître qui suggèrent que le masque de saisie attend un format très spécifique à saisir.

Questions fréquemment posées

Q : Comment puis-je ajouter un masque de saisie spécifique pour une adresse britannique ?

R : Si vous savez que votre formulaire n'acceptera que des adresses britanniques, vous pouvez configurer un masque de saisie pour le code postal britannique avec ce 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 )

Et c'est tout ce dont vous avez besoin pour configurer un masque de saisie sur le Code postal de l'adresse internationale. Ensuite, souhaitez-vous créer un schéma d'adresse personnalisé ? Consultez notre article sur Comment créer des schémas supplémentaires pour le champ Adresse.

Filtre de référence

wpforms_field_properties