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 with public emails and only allow submissions from work emails on a Webflow Collection page template, you can follow these steps:
1. Add a hidden field to your Webflow form. This field will hold the domain name of the email address submitted in the form.
2. Use JavaScript to extract the domain from the email address and store it in the hidden field. You can accomplish this by adding a custom JavaScript code snippet to the page where your form is located.
Here's an example of code you can use to extract the domain from the email and populate the hidden field:
```javascript
<script>
const emailField = document.getElementById('email'); // Replace 'email' with your actual form field ID
const domainField = document.getElementById('domain'); // Replace 'domain' with the ID of your hidden field
emailField.addEventListener('change', function() {
const email = this.value;
const domain = email.substring(email.lastIndexOf('@') + 1);
domainField.value = domain;
});
</script>
```
In the above code, replace `'email'` with the actual ID of your email input field, and `'domain'` with the ID of your hidden field.
3. Create a Collection in Webflow to store the blocked email domains. Within this Collection, add a single Text field to store the domains.
4. Create a Collection Item for each blocked domain you want to prevent form submissions from. Add the domain name to the Text field you created in the previous step.
5. Add a limit to the Collection List that displays the blocked domains. This limit ensures that only the first entry is shown on the page.
6. Use JavaScript to validate the form submission and block it if the submitted domain matches any of the blocked domains. Add the following code snippet to your custom JavaScript:
```javascript
<script>
const form = document.getElementById('your-form-id'); // Replace 'your-form-id' with the actual ID of your form
const domainField = document.getElementById('domain'); // Replace 'domain' with the ID of your hidden domain field
const blockedDomainsList = Array.from(document.querySelectorAll('.blocked-domain'));
form.addEventListener('submit', function(event) {
const domain = domainField.value;
const isBlocked = blockedDomainsList.some(function(blocked) {
return domain.includes(blocked.textContent);
});
if (isBlocked) {
event.preventDefault();
alert('Form submission blocked. Please use a work email.');
// You can add further handling here, like displaying an error message or redirecting the user.
}
});
</script>
```
In the code above, replace `'your-form-id'` with the actual ID of your form element, and `'domain'` with the ID of your hidden domain field. Also, make sure to adjust the query selector `'.blocked-domain'` if you use a different class or element to display your blocked domains.
Make sure to replace all placeholders and adapt the code to your specific form and setup.
With these steps, you should be able to block form submissions from public email domains on your Webflow Collection page template. This solution allows you to manually add and remove domains to the blocking list within your Webflow project.
