Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment bloquer les e-mail non professionnels des formulaires Webflow

Florian Bodelot
Florian Bodelot
May 29, 2022
Icônes de bloquage avec les logos Yahoo, Google et Outlook

Vous souhaitez bloquer les soumissions de vos formulaires Webflow aux adresses gmail, hotmail, ou bien Yahoo, car les leads ne sont pas qualifiés ?

Dans ce tutoriel vous allez apprendre à créer une liste de noms de domaine de mail qui seront bloqués lors de la soumission de vos formulaires Webflow.

Vous préférez les vidéos ? Regardez notre tutoriel en français sur Youtube !

Utiliser le hack #18 de Finsweet pour Webflow

Le hack 18 de Finsweet va vous permettre, en trois étapes seulement, d'ajouter cette fonctionnalité (avec du code Jacascript) à n'importe quel site webflow. Cette solution ne nécessite aucun outil supplémentaire et est à 100% gratuite. Merci Finsweet 🙌

1. Copier-coller le code dans votre site

Pour utiliser cette technique, vous devez copier-coller le code Javascript ci-dessous dans la balise "before </body> tag" de la page Webflow où se trouve le formulaire auquel vous souhaitez bloquer les e-mails non professionnels.

<!-- F’in sweet Webflow Hacks --> <script> // when the DOM is ready $(document).ready(function() { // make an array of invalid domains const invalidDomains = ['gmail.com', 'AJOUTER-ICI', 'hotmail.com', 'competitor.com']; // get the submit button const submitBtn = $('.hack-button'); // on submit button click submitBtn.click(()=>{ // get the email field const email = $('.hack18-email'); // split email at '@' character to get domain const domainPart = email.val().split('@')[1]; // if the domain exists in the invalidDomains array if(invalidDomains.indexOf(domainPart) !== -1) { // clear email field email.val(''); // add a 'use business mail' placeholder email.attr('placeholder','Please enter a business email'); // prevent form submission return false; } else{ // else if email is not invalid // submit form return true; } }); }); </script>

2. Personnaliser le code

Vous devez ensuite personnaliser le code pour décider des adresses de courriels que vous souhaitez bloquer. Adresse mail gmail ? Ou bien par exemple l'adresse mail de vos concurrents qui cherchent à consulter votre contenu gratuit ?

Sur la ligne "const invalidDomains = [ 'AJOUTER-ICI']; changer la valeur AJOUTER-ICI par la racine de l'adresse mail que vous souhaitez exclure.

Si vous souhaitez exclure les mails provenant des adresses mail Google par exemple, remplacer le "ajouter-ici" par "gmail.com".

3. Ajouter des classes CSS à votre bouton et votre champ email

Dernière étape de ce tutoriel, il faut que le code Javascript identifie le bouton de soumission et le champ e-mail de votre formulaire webflow. Pour cela il vous faut simplement :

  1. Ajouter la classe CSS .hack-button au submit bouton de votre formulaire
  2. Ajouter la classe .hack18-email à votre champ email sur votre formulaire webflow

Et voilà, à vous de tester !

Bonus : personnaliser le message du placeholder de votre formulaire webflow

Dans le code Js, remplacer la phrase "Please enter a business email" par le message de votre souhait. Comme par exemple : "Adresse professionnelle"

Voilà, vous savez maintenant comment empêcher la soumission de vos formulaires webflow de n'importe quelle adresse e-mail.

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions