Block Personal Emails in Webflow Forms

Example

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Documentation

This script will show the message “Please enter a business email” on the email input’s placeholder when an unprofessional email is detected.

You can customize the Invalid Domains list in the script.

Create a webflow form and add the following to the form elements:

→ Set the id of the email input element as Work-Email
‍→ Add this custom attribute to the Form button element: data-submit-btn
→ Customize the error state of the email input by adding the combo class error into the input.

Paste the script into the custom code section (before </body> tag)


<script>
$(document).ready(function() {
const invalidDomains = [
  'gmail.com', 
  'hotmail.com', 
  'icloud.com', 
  'yahoo.com', 
  'zoho.com', 
  'aol.com', 
  'outlook.com', 
  'live.com', 
  'msn.com',
  'gotransverse.com', 
  'alldata.com', 
  'me.com', 
  'comcast.net', 
  'verizon.net', 
  'att.net', 
  'charter.net', 
  'cox.net', 
  'inbox.com', 
  'mail.com', 
  'gmx.com', 
  'protonmail.com', 
  'tutanota.com', 
  'yandex.com', 
  'aol.co.uk', 
  'btinternet.com', 
  'talktalk.net', 
  'ntlworld.com', 
  'me.com', 
  'mac.com', 
  'googlemail.com', 
  'btopenworld.com',
];
  $('[data-submit-btn]').click(() => {
    const domainPart = $('#Work-Email').val().split('@')[1]; 
  
    if(invalidDomains.includes(domainPart)) {
      $('#Work-Email').val('').attr('placeholder', 'Please enter a business email').addClass('error');;
      return false;
    }
    else {
      $('#Work-Email').removeClass('error');
      return true;
    }
  });
});

</script>