How can I block non-corporate email domains in Webflow forms?

If your business relies on lead generation through your website—especially for B2B services—you’ve likely encountered submissions from generic email addresses like gmail.com, yahoo.com, or hotmail.com. While some may be legitimate, many of these entries are incomplete, low-quality, or even spam.

Blocking non-corporate email domains helps you:

• Improve lead quality by encouraging submissions from verified business emails.
• Avoid spam and bots that commonly use free email services.
• Streamline follow-ups with contacts who are more likely to be decision-makers or company representatives.
• Protect premium offers like demos or consultations from misuse by casual browsers or competitors.

This is especially useful if you offer high-touch services or sales consultations where each lead matters.

This guide explains how to restrict form submissions that use free or personal email domains using JavaScript. This method supports multiple forms on the same page.

Step 1: Wrap Your Form

Wrap each form in a div with a specific class. You’ll use this class in the script. Wrapping the form in a div also allows you to have multiple instances on one page without adjusting the code.

Example:

<div class="business-form-wrapper">
<!-- Your form goes here --> </div>

Step 2: Assign Target Classes

Inside your form, add specific classes or ID's to the Email Input and the Submit Button for script targeting purposes. These can be combo classes with no styles.

HTML Example:

<form> <input type="email" class="business-email"/> 
<button type="submit" class="button business-form">Submit</button> 
</form>

Step 3: Finish the Form

Style and create the rest of your form as normal.

Step 4: Add the JavaScript

Create your JavaScript code using the specific classes you have given the form wrapper, the submit button, and the email input. Then paste your code into the "Before </body> tag" section of your Page Settings in Webflow.

Here’s a working example of a code you can use with the example classes from this article:

<script>
  $(document).ready(function () {
    const blockedDomains = [
      'gmail.com',
      'yahoo.com',
      'hotmail.com',
    ];

    $('.business-form-wrapper').each(function () {
      const wrapper = $(this);
      const emailInput = wrapper.find('.business-email')[0];
      const submitButton = wrapper.find('.button.business-form');
      const form = wrapper.find('form');

      function validateEmailDomain() {
        const email = emailInput.value.trim();
        const domain = email.split('@')[1]?.toLowerCase();

        if (blockedDomains.includes(domain)) {
          emailInput.setCustomValidity('Please enter a valid business email address.');
          emailInput.reportValidity();
          return false;
        }

        emailInput.setCustomValidity('');
        return true;
      }

      submitButton.click(function () {
        return validateEmailDomain();
      });

      form.submit(function (e) {
        if (!validateEmailDomain()) {
          e.preventDefault();
        }
      });

      wrapper.find('.business-email').on('input', function () {
        emailInput.setCustomValidity('');
      });
    });
  });
</script>

Step 4: Customize the Domain List

You can add or remove domains from the "blockedDomains" list to suit your needs. To allow only business email addresses, include all known free or personal providers.

Final Notes

• This method works with multiple forms on the same page.
  
  
• It provides real-time feedback using the browser’s built-in validation messaging.
  
  
• No styling is necessary for functionality. Just be sure the targeting classes are present.

Have fun and good luck! If you need more help with implementing this to your site, contact us here! Don’t worry—we offer no-commitment, ad hoc Webflow website maintenance. You only pay for the time it takes to implement the solution. Rapid Fire is here to help you take your website to new heights.