Introduction
Souhaitez-vous ajouter la validation du champ "code postal" à vos WPForms ? Par défaut, lorsque vous utilisez le champ Adresse, il n'y a qu'un endroit pour entrer un code postal avec l'adresse. Cependant, dans ce tutoriel, nous allons vous montrer comment vous pouvez créer un champ qui recherchera les codes postaux utilisables et ne soumettra pas le formulaire si le code postal n'est pas dans votre zone de service préférée.
Création du formulaire
Nous allons commencer par créer un nouveau formulaire et ajouter tous les champs obligatoires.
Nous ajouterons un champ de formulaire Texte à une ligne qui comportera un masque de saisie qui servira de champ pour le code postal. Ainsi, lorsque le formulaire sera soumis, le snippet prendra la valeur saisie dans ce champ et la comparera à une liste de codes postaux qui se trouvent dans notre zone de service. En cas d'échec, l'utilisateur verra un message indiquant que nous ne desservons pas cette zone pour le moment.
Si vous avez besoin d'aide pour créer des formulaires, consultez ce guide utile.
Utilisation du masque de saisie
Comme nous voulons que notre champ de texte à ligne unique s'affiche comme un champ de code postal standard, nous allons ajouter un masque de saisie à ce champ. Pour ce faire, cliquez sur le champ et accédez à l'onglet Avancé. Dans le champ Masque de saisie, entrez 99999. Cela signifie que ce champ particulier n'acceptera que 5 chiffres.
Pour plus d'informations sur les masques de saisie dans WPForms, veuillez consulter ce tutoriel pour plus d'exemples.
Ajout du snippet
Il est maintenant temps d'ajouter notre extrait. Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets, veuillez consulter cette documentation.
/**
* Add zip code field validation.
*
* @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
*/
function wpf_dev_validate_zip_code( $fields, $entry, $form_data ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #3382.
if ( absint( $form_data[ 'id' ] ) !== 3382 ) {
return $fields;
}
// Get the value of the zip code field the user entered
// Field ID for zip code field is '6'
$zip_code = $fields[6][ 'value' ];
// Zip code array, each zip code separated by a comma
$zip_code_list = array(
'85224',
'85225',
'85226',
'85233',
'85234',
'85244',
'85246',
'85248',
'85249',
'85286',
'85295',
'85296',
'85297',
'85298',
'85299'
);
if (!in_array($zip_code, $zip_code_list)) {
// Check the field ID 75 and show an error message at the top of the form and under the specific field
wpforms()->process->errors[ $form_data[ 'id' ] ]['6'] = esc_html__( 'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.', 'plugin-domain' );
}
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code', 10, 3 );
Décomposons cet extrait pour en expliquer chaque partie. La première section de l'extrait vérifie si l'ID du formulaire que l'extrait examine correspond à l'ID du formulaire que nous avons spécifié dans l'extrait. Pour cet exemple, ce snippet ne s'exécutera que sur le formulaire ID 3382.
La ligne suivante du snippet recherche le champ ID 6 et récupère la valeur saisie dans le formulaire. Une fois qu'elle a cette valeur, elle va la comparer à la liste des codes postaux que nous avons saisie dans le tableau $zip_code_list. Vous devrez mettre à jour l'ID du formulaire, l'ID du champ et mettre à jour les codes postaux affichés dans ce tableau pour qu'ils correspondent à vos propres codes postaux.
Pour vous aider à trouver vos numéros d'identification de formulaire et de champ, veuillez consulter notre tutoriel sur la localisation des numéros d'identification de formulaire et de champ.
Une fois que vous avez apporté vos modifications à l'extrait, vous remarquerez que le formulaire ne traitera pas la demande si le code postal saisi ne se trouve pas dans la liste de tableaux $zip_code_list.
C'est tout ce dont vous avez besoin pour ajouter la validation du code postal à un champ de texte à ligne unique. Vous souhaitez également limiter les pays qui s'affichent lorsque vous utilisez le champ Adresse et la saisie semi-automatique ? Jetez un coup d'œil à notre tutoriel sur la façon de limiter la saisie semi-automatique d'une adresse à un pays spécifique.
En rapport
Référence de l'action : wpforms_process