Comment bloquer les e-mail non professionnels des formulaires Webflow

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 <!-- fs-richtext-ignore --></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.