How can I add code to Webflow to require a valid domain ending in email submissions?
TL;DR
- Select the form to validate, then add a JavaScript snippet to its page's "Custom Code" section to check email domains.
- Modify the list of valid domains within the script, save changes, and publish the site to apply email validation on form submissions.
To require a valid domain ending in email submissions on Webflow, you'll need to use custom code to handle this validation. Follow these steps to integrate a validation script into your Webflow project.
1. Identify the Form
- Go to your Webflow project and navigate to the page containing the form.
- Select the form you want to add the email validation to.
2. Prepare Your Custom Code
- You'll need a snippet of JavaScript to check the domain of email addresses.
- Decide on the specific domains you want to allow (e.g., ".com", ".org").
3. Add Custom Code
- Go to Page Settings where your form is located in Webflow.
- Scroll to the "Custom Code" section at the bottom of the page settings.
- Paste your custom script in the Footer Code section. Here's a basic example:
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
const emailField = form.querySelector('input[type="email"]');
if (emailField) {
const validDomains = ['.com', '.org']; // Define valid domains here
const email = emailField.value;
const domainIsValid = validDomains.some(domain => email.endsWith(domain));
if (!domainIsValid) {
event.preventDefault(); // Prevents form submission
alert('Please provide a valid email address with an approved domain.');
}
}
});
});
</script>
4. Modify and Save
- Modify the
validDomainsarray to include the domain suffixes you want to allow. - Click "Save" to save the custom code.
5. Publish Your Site
- Publish your changes to see the validation in action on your live site.
Summary
To require a valid domain ending in Webflow form submissions, you embed custom JavaScript into your page's footer code to intercept form submissions and validate email addresses against a list of acceptable domain endings. Make sure to adjust the list of valid domains according to your requirements.
