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?

TL;DR
  • Ensure JavaScript code is placed before the </body> tag and review logic for filtering public email domains.
  • Update JavaScript to include more public domains, ensure form submission interception, and republish the site after changes.
  • Consider third-party tools or server-side validation if client-side methods are insufficient, and test with various email scenarios to ensure effectiveness.

You want to block form submissions from public emails and allow only work emails on a Webflow Collection page template. Let's explore the steps you can try to troubleshoot and resolve this issue.

1. Validate JavaScript Code Placement

  • Ensure that your code is placed correctly before the </body> tag in the Custom Code section of the specific Collection page template.
  • Check browser console for any errors that might prevent the code from executing as expected.

2. Check for JavaScript Logic

  • Review the JavaScript logic to ensure it accurately identifies and filters public email domains. Common public domains include "@gmail.com", "@yahoo.com", and "@hotmail.com".
  • Test the logic in the console using different email inputs to confirm it correctly identifies public versus work emails.

3. Update JavaScript Code

  • Modify your code to include a comprehensive list of public domains if it's too limited, covering as many services as necessary.
  • Ensure the JavaScript correctly prevents form submission by intercepting the form's submit event and returning false or calling preventDefault() on the event.

4. Test the Webflow Publishing State

  • Republish your site after updating any code to ensure all changes are live.
  • Clear your browser cache to remove any cached scripts that may not reflect the most recent updates.

5. Consider Alternative Tools

  • If client-side validation falls short, consider server-side validation for additional robustness, though this requires backend support.
  • Explore third-party tools that may allow you to block certain domains more reliably.

6. Test Multiple Scenarios

  • Simulate form submissions using various email domains to ensure the system consistently blocks or allows the appropriate ones.

Summary

Ensure your JavaScript code accurately identifies public email domains and is correctly implemented in the Custom Code section to prevent unwanted form submissions. Verify across various scenarios and validate your setup to match business requirements. If this approach proves inadequate, consider third-party solutions or server-side validation for enhanced reliability.

Rate this answer

Other Webflow Questions