Restrict Free Emails in HTML Forms and Contact Form 7

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( $result, $tag ) {
    $restricted_domains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];
    
    // Get the submitted email value
    $email = isset( $_POST['corporate-email'] ) ? sanitize_email( $_POST['corporate-email'] ) : '';
    $domain = substr( strrchr( $email, '@' ), 1 );
    
    // Check if the domain is restricted
    if ( in_array( $domain, $restricted_domains ) ) {
        $result->invalidate( $tag, 'Please use a corporate email address.');
    }
    return $result;
}
add_filter( 'wpcf7_validate_email*', 'validate_corporate_email', 20, 2 );

Explanation: This code uses the `wpcf7_validate_email` filter to validate the email field on the server during form submission. It checks the email domain against a list of restricted domains, and if a match is found, it invalidates the form submission and provides an error message to the user.

JavaScript Code for CF7 Fields

document.addEventListener('wpcf7mailsent', function (e) {
    const emailField = document.querySelector('input[name="corporate-email"]');
    const emailValue = emailField.value;
    const restrictedDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com'];

    const domain = emailValue.split('@')[1];
    if (restrictedDomains.includes(domain)) {
        alert('Please use a corporate email address.');
    }
});

Explanation: This JavaScript snippet listens for the CF7 form submission event and validates the email field against a predefined list of restricted domains. It provides a customizable way to enforce corporate email requirements in CF7.

“Using both server-side validation with the wpcf7_validate_email filter and client-side validation with JavaScript ensures robust enforcement of corporate email restrictions.”

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!