Elementor, un constructeur de pages largement utilisé pour WordPress, offre une multitude de fonctionnalités puissantes, y compris la création de formulaires via son plugin Elementor Pro. Par défaut, les formulaires Elementor permettent la soumission de toute adresse email. Cependant, si vous souhaitez limiter le champ email pour n’accepter que des adresses email professionnelles et bloquer les domaines des fournisseurs d’email personnels populaires, cela peut être réalisé en utilisant un simple extrait de code. Le tutoriel guide à travers le processus d’implémentation de cette fonctionnalité dans vos formulaires Elementor.
Prérequis
Avant de commencer, assurez-vous d’avoir :
- Un site WordPress avec Elementor Pro installé et activé.
- Accès au fichier functions.php du thème ou à un fichier de plugin personnalisé.
Comment Autoriser Uniquement les Adresses Email Professionnelles dans les Formulaires Elementor
1. Ouvrir le Fichier de Fonctions du Thème :
Commencez par ouvrir le fichier functions.php de votre thème. Si vous utilisez un thème enfant, éditez le fichier functions.php de ce dernier.
2. Ajouter l'Extrait de Code :
Copiez et collez le code fourni à la fin du fichier functions.php. Ce code utilise la fonction add_action() de WordPress pour se greffer à l’action elementor_pro/forms/validation/email, qui est déclenchée lorsqu’un champ email dans un formulaire Elementor est validé.
// Hook email pro uniquement pour forms elementor pro
add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
// Veuillez inclure dans cette liste les domaines de courrier électronique que vous souhaitez bloquer
$invalidDomains = ["@gmail.","@yahoo.","@hotmail.","@live.","@aol.","@outlook."];
// email validation
foreach($invalidDomains as $domain){
if(strpos($field['value'], $domain) !== false){
$ajax_handler->add_error( $field['id'], "Nous n'acceptons pas ce type d'email, uniquement votre mail pro svp." );
}
}
}, 10, 3 );
3. (Optionnel) Appliquer la Fonctionnalité à un Formulaire Spécifique :
Par défaut, la validation de l’email sera appliquée à tous les formulaires Elementor. Si vous souhaitez activer cette fonctionnalité uniquement pour un formulaire spécifique, modifiez le code comme indiqué dans le tutoriel.
// Hook email pro uniquement pour forms elementor pro par formulaire
add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
// Specify the form name to target
$form_name = 'monform'; // Remplace 'monform' avec le nom du formulaire en question
// Check if the current form matches the targeted form name
if ( $record->get_form_settings( 'form_name' ) === $form_name ) {
// Please include the email domains you would like to block in this list
$invalidDomains = ["@gmail.","@yahoo.","@hotmail.","@live.","@aol.","@outlook."];
// Email validation
foreach( $invalidDomains as $domain ) {
if ( strpos( $field['value'], $domain ) !== false ) {
$ajax_handler->add_error( $field['id'], "Nous n'acceptons pas ce type d'email, uniquement votre mail pro svp." );
break; // Stop checking other domains if an error is found
}
}
}
}, 10, 3 );
4. Sauvegarder le Fichier :
Sauvegardez le fichier functions.php après avoir effectué les modifications nécessaires.
5. Tester la Fonctionnalité :
Rendez-vous sur la page où votre formulaire Elementor est affiché et essayez de soumettre une adresse email. Si l’adresse email contient l’un des domaines bloqués (par exemple, Gmail, Yahoo, Hotmail, etc.), un message d’erreur s’affichera, indiquant que seules les adresses email professionnelles sont autorisées.
En suivant les étapes de ce tutoriel, vous pouvez facilement activer la fonctionnalité permettant d’autoriser uniquement les adresses email professionnelles dans le champ email de vos formulaires Elementor. Cela peut être utile si vous souhaitez vous assurer que seules des adresses email professionnelles sont soumises via vos formulaires. Par défaut, l’extrait de code applique la validation à tous les formulaires Elementor, mais vous pouvez l’activer pour un formulaire spécifique en mettant à jour le code comme décrit dans l’étape 3.
