How can I block form submissions with public emails on a Webflow Collection page template, and only allow submissions from work emails? I've implemented suggested code before the </body> tag, but a form submission still went through. If it's not possible to filter public emails, I'm considering switching to an embedded Hubspot form with their blocking list feature. However, I liked the idea of manually adding and removing domains to the blocking list, which is not possible with Hubspot. Can someone please help me troubleshoot and provide a solution for this issue on Webflow?

To block form submissions from public email domains on a Webflow Collection page template, you need to use a combination of JavaScript validation and custom logic since Webflow's native form functionalities do not directly support filtering email domains. Here’s how you can address this:

​

1. Add JavaScript for Validation

• Insert Custom Code: Once you're in the Webflow Designer, navigate to the page settings of your Collection page template.
• Place Code Before </body>: Add the following script to check for and block submissions from specific public email domains:
• An example list of public domains: gmail.com, yahoo.com, hotmail.com.
• JavaScript Example:

    ```javascript

    document.addEventListener('DOMContentLoaded', function () {

      const form = document.querySelector('form');

      const emailField = form.querySelector('input[type="email"]');

​

      form.addEventListener('submit', function (event) {

        const publicDomains = ['gmail.com', 'yahoo.com', 'hotmail.com'];

        const emailValue = emailField.value;

        const emailDomain = emailValue.split('@')[1];

​

        if (publicDomains.includes(emailDomain)) {

          event.preventDefault();

          alert('Please use a work email address.');

        }

      });

    });

    ```

​

2. Ensure Correct Script Placement

• Check Placement: Make sure the script is correctly placed within the custom code settings and that there are no JavaScript errors in the console.
• Disable Conflicting Scripts: Temporarily disable other scripts to predict if they are interfering with form validation.

​

3. Test the Setup

• Form Testing: Submit a form using various emails from both public and non-public domains to ensure the script functions correctly.
• Troubleshooting: Open the browser's development console to check for any script errors or issues.

​

4. Consider External Solutions

• HubSpot Forms: If manual domain list updates are not critical, embed a HubSpot form instead, making use of their advanced features to block public emails.
• Explore Third-Party Integrations: Services like Zapier can connect Webflow to email verification services, though this requires additional steps and configurations.

​

Summary

To prevent form submissions from public emails on a Webflow Collection page, implement a JavaScript validation script to filter based on domain. Test thoroughly to ensure accuracy. If necessary, consider external tools like HubSpot for more robust solutions, keeping in mind their limitations on manual adjustments.