How to Prevent Certain Email Domains from Submitting on Your Webflow Form

Webflow is a powerful tool for creating websites without the need for writing code. It offers a variety of features to customize and enhance your website, including the ability to create forms for gathering user information. In this tutorial, we will learn how to prevent certain email domains from submitting on your Webflow form. This can be useful for ensuring that only specific types of emails are allowed to submit the form, such as business emails, while blocking others like Gmail, Yahoo, or competitor domains.

Live Example

Before we dive into the technical details, let's take a look at a live example of how this functionality works. Imagine you have a form on your website, and you want to restrict submissions from certain email domains, such as Gmail. When a user tries to submit the form with an email from the restricted domain, they will be prompted to enter a business email instead.

Implementation in Webflow

To implement the functionality of preventing certain email domains from submitting on your Webflow form, we will use JavaScript. This will involve creating a list of rejected email domains and checking the submitted email against this list when the form is submitted. If the email domain is in the rejected list, the form submission will be blocked, and the user will be prompted to enter a valid business email.

Using Classes in Webflow

We'll start by setting up our form in Webflow. We'll work with a native Webflow form from the Assets panel. No special settings are required for the form itself; however, we will apply two important classes to the email field and the submit button.

• Email Field Class: Add the class "hack-18-email" to the email input field.
• Submit Button Class: Add the class "hack-button" to the submit button.

These classes will allow us to manipulate the form using JavaScript.

JavaScript Code

Now, let's break down the JavaScript code that will be used to prevent certain email domains from submitting on our Webflow form. We will add this JavaScript code to our Webflow project to achieve the desired functionality.

<script>  document.addEventListener('DOMContentLoaded', function() {    // List of invalid email domains    var invalidDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', /* Additional rejected domains */];    // Get the submit button    var submitBtn = document.querySelector('.hack-button');    // On form submission    submitBtn.addEventListener('click', function(e) {      // Get the email field      var email = document.querySelector('.hack-18-email');      // Get the domain part of the submitted email      var domainPart = email.value.split('@')[1];      // Check if the domain part is part of the invalid domains      if (invalidDomains.includes(domainPart)) {        // Do not submit the form        email.value = ''; // Clear the email field        email.setAttribute('placeholder', 'Please enter a business email'); // Show placeholder text        return false; // Do not submit the form      } else {        return true; // Submit the form      }    });  });</script>

Let's go through each part of the JavaScript code:

Creating the List of Invalid Domains

We start by creating an array called invalidDomains, which represents the list of email domains that we do not want to be able to submit the form. We include domains like gmail.com, yahoo.com, hotmail.com, and any additional rejected domains.

Handling Form Submission

Next, we get the submit button using the class .hack-button and add an event listener for the click event. When the submit button is clicked, the following actions are performed:

1. Get the Email Field: The script retrieves the value from the email input field with the class .hack-18-email.

2. Extract the Domain Part: It then extracts the domain part of the submitted email by splitting the value at the "@" symbol.

3. Check for Invalid Domains: The script checks if the domain part of the submitted email is part of the invalidDomains list. If it is, the form submission is blocked. The email field is cleared, a placeholder text prompting for a business email is set, and return false prevents the form from being submitted.

4. Allow Valid Domains: If the submitted email domain is not in the invalidDomains list, the form submission is allowed, and return true is triggered.

Conclusion

Using this JavaScript code, we have successfully implemented a mechanism to prevent certain email domains from submitting on a Webflow form. By incorporating this functionality, you can ensure that only desired email domains are allowed to submit the form, while any submissions from rejected domains are blocked, guiding users to provide valid business email addresses.

Conclusion

In this tutorial, we have learned how to prevent certain email domains from submitting on a Webflow form. By using JavaScript and applying classes to the form elements in Webflow, we were able to create a functionality that checks the submitted email domain against a list of rejected domains and handles the form submission accordingly. This approach provides a powerful way to control the types of emails accepted through the form, ensuring the validity and quality of the submissions.

By understanding and implementing this technique, you have added a valuable tool to your Webflow development skills, empowering you to create more sophisticated and secure forms for your websites. As you continue to explore Webflow's capabilities, consider how you can integrate similar custom functionalities to enhance the user experience and achieve specific requirements for your projects. Happy coding with Webflow!