How to block unprofessional e-mail from Webflow forms

Do you want to block the submission of your Webflow forms to gmail, hotmail, or Yahoo addresses, because the leads are not qualified?

In this tutorial you will learn how to create a list of mail domain names that will be blocked when submitting your Webflow forms.

You prefer videos? Watch our French tutorial on Youtube!

Using Finsweet hack #18 for Webflow

The Finsweet hack 18 will allow you, in only three steps, to add this functionality (with Jacascript code) to any webflow site. This solution requires no additional tools and is 100% free. Thanks Finsweet 🙌

1. Copy and paste the code into your 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. Customise the code

You then need to customise the code to decide which email addresses you want to block. Gmail email address? Or, for example, the email address of your competitors who are looking to view your free content?

On the line "const invalidDomains = [ 'ADD-ICI']; change the value ADD-ICI to the root of the email address you wish to exclude.

If you want to exclude emails from Google email addresses for example, replace the "add-here" with "gmail.com".

3. Adding CSS classes to your button and email field

Last step of this tutorial, the Javascript code must identify the submit button and the e-mail field of your webflow form. To do this you simply need to :

1. Add the CSS class .hack-button class to your form's button submit
2. Add the class .hack18-email to your email field on your webflow form

And now it's your turn to try it out!

Bonus : Customize the placeholder message of your webflow form

In the Js code, replace the sentence "Please enter a business email" with the message you want. For example: "Business address".

Now you know how to prevent the submission of your webflow forms from any email address.