Allowing only corporate emails in forms can be a crucial step for businesses that want to avoid submissions from free email providers like Gmail, Yahoo, or Outlook. This ensures that the users submitting the form are associated with a business or organization.
In this guide, we’ll explore how to enforce this restriction in HTML forms and the popular WordPress plugin, Contact Form 7 (CF7).
Why Restrict Free Email Providers?
Restricting free email providers can improve the reliability and quality of the submissions you receive, ensuring they come from professional users associated with organizations or businesses.
- Professionalism: Corporate emails often reflect a professional identity associated with a company.
- Spam Reduction: Limiting free email domains reduces the likelihood of receiving spam submissions.
- Enhanced Data Quality: You can gather more relevant and actionable data from genuine corporate users.
Restricting Free Emails in an HTML Form
To restrict free email providers in a standard HTML form, you can use JavaScript to validate the email field.
HTML Code
<form id="corporate-email-form">
<label for="email">Enter your corporate email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
JavaScript Code
document.getElementById('corporate-email-form').addEventListener('submit', function (e) {
const emailField = document.getElementById('email');
const emailValue = emailField.value;
const restrictedDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];
const domain = emailValue.split('@')[1];
if (restrictedDomains.includes(domain)) {
e.preventDefault();
alert('Please use a corporate email address.');
}
});
Explanation: This JavaScript code listens for the form’s submit event, extracts the domain from the entered email address, and checks if it matches any restricted domains. If it does, the form submission is prevented, and an alert notifies the user.
Using Regex for Advanced Validation
For more advanced validation, you can use a regex pattern to dynamically exclude specific domains.
JavaScript Code with Regex
const emailRegex = /^[a-zA-Z0-9._%+-]+@(?!gmail\.com$|yahoo\.com$|outlook\.com$|hotmail\.com$)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
document.getElementById('corporate-email-form').addEventListener('submit', function (e) {
const emailField = document.getElementById('email');
const emailValue = emailField.value;
if (!emailRegex.test(emailValue)) {
e.preventDefault();
alert('Please use a corporate email address.');
}
});
Explanation: This regex ensures the email domain does not match any restricted domains. It dynamically validates the input and prevents submission if a free email is detected.
“Using a regular expression (regex) for email validation provides a robust way to enforce custom rules, ensuring your form accepts only the desired types of email addresses.”
Restricting Free Emails in Contact Form 7
While Contact Form 7 doesn’t directly support the pattern attribute, you can enforce corporate email validation by using the wpcf7_validate_email filter for server-side validation or JavaScript for client-side validation.
Using the wpcf7_validate_email Filter
Contact Form 7 provides the wpcf7_validate_email filter, allowing you to validate email fields server-side during form submission. Here’s how you can restrict free email domains:
function validate_corporate_email_field( $result, $tag ) {
// Target only the "corporate-email" field
if ( $tag->name !== 'corporate-email' ) {
return $result;
}
$restricted_domains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];
$email = isset( $_POST['corporate-email'] ) ? sanitize_email( $_POST['corporate-email'] ) : '';
$domain = strtolower( substr( strrchr( $email, '@' ), 1 ) );
if ( in_array( $domain, $restricted_domains ) ) {
// Prevent submission and display message in .wpcf7-response-output
$result->invalidate( $tag, 'Please use a corporate email address.' );
}
return $result;
}
add_filter( 'wpcf7_validate_email*', 'validate_corporate_email_field', 20, 2 );Important: This code specifically targets an email field with the name corporate-email. Make sure your CF7 form includes an input like this:
[email* corporate-email placeholder "[email protected]*"]“Using the field name
corporate-emailensures the validation filter runs only on that specific input, allowing you to customize behavior without affecting other email fields.”
Client-Side Validation with JavaScript
In addition to server-side validation, you can also prevent submission on the client side using JavaScript:
document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('.wpcf7 form');
if (form) {
form.addEventListener('submit', function (e) {
const emailField = form.querySelector('input[name="corporate-email"]');
const emailValue = emailField.value.trim();
const restrictedDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];
if (emailValue.includes('@')) {
const domain = emailValue.split('@')[1].toLowerCase();
if (restrictedDomains.includes(domain)) {
alert('Please use a corporate email address.');
e.preventDefault(); // This stops CF7 from submitting
}
}
});
}
});Explanation: This script targets only the corporate-email input field using input[name="corporate-email"]. It prevents the form from being submitted if a restricted domain is detected, enhancing UX by providing instant feedback without requiring a page reload.
“Combining server-side and client-side validation gives you the best of both worlds: security and user experience.”
Conclusion
Restricting free email providers in forms is a straightforward yet effective way to ensure better-quality submissions. Whether you’re using a simple HTML form or the Contact Form 7 plugin, these methods allow you to enforce corporate email usage seamlessly.
Feel free to adapt the examples provided to fit your specific requirements. If you have any questions or need further assistance, share them in the comments below!
