Allow Only Business Email Addresses in the Email Field of Elementor Forms

Elementor is a popular WordPress page builder that offers a range of powerful features, including form creation through its Elementor Pro plugin. By default, Elementor forms allow any email address to be submitted. However, if you want to restrict the email field to only accept business email addresses and block popular personal email provider domains, you can achieve this by using a simple code snippet. In this tutorial, we will walk you through the process of implementing this functionality in your Elementor forms.

Prerequisites: Before you begin, make sure you have the following:

1. A WordPress website with Elementor Pro installed and activated.
2. Access to the theme’s functions.php file or a custom plugin file.

As Elementor Form is available on the Pro version only, You need to have Elementor Pro. If you don’t have one you can get it from here.

How to Allow Only Business Email Addresses in Elementor Forms

Step 1: Open the Theme’s Functions File

To get started, open your theme’s functions.php file. If you’re using a child theme, you should edit the child theme’s functions.php file. If not, you can edit the functions.php file of your active theme.

Step 2: Add the Code Snippet

Once you have the functions.php file open, copy and paste the following code at the end of the file:

// Validate the email fields for valid domains
add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
// Please include the email domains you would like to block in this list
$invalidDomains = ["@gmail.","@yahoo.","@hotmail.","@live.","@aol.","@outlook."];
	
	// email validation
	foreach($invalidDomains as $domain){
		if(strpos($field['value'], $domain) !== false){
    	$ajax_handler->add_error( $field['id'], "Must be Business email." ); 
		}
	}
}, 10, 3 );

This code snippet uses the add_action() function in WordPress to hook into the elementor_pro/forms/validation/email action, which is fired when an email field in an Elementor form is validated. When this action is triggered, the provided callback function is executed.

If you need this feature for specific From

In the code snippet above, the email validation will be applied to all Elementor forms by default. However, if you want to enable this functionality for a specific form only, you can modify the code like this

// Validate the email fields for valid domains
add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
    // Specify the form name to target
    $form_name = 'mukto-form'; // Replace 'mukto-form' with the actual form name

    // Check if the current form matches the targeted form name
    if ( $record->get_form_settings( 'form_name' ) === $form_name ) {
        // Please include the email domains you would like to block in this list
        $invalidDomains = ["@gmail.","@yahoo.","@hotmail.","@live.","@aol.","@outlook."];

        // Email validation
        foreach( $invalidDomains as $domain ) {
            if ( strpos( $field['value'], $domain ) !== false ) {
                $ajax_handler->add_error( $field['id'], "Must be Business email." );
                break; // Stop checking other domains if an error is found
            }
        }
    }
}, 10, 3 );

Replace 'mukto-form' with the actual name attribute value of the Elementor form, you want to target. You can find the form name by inspecting the HTML of the form on your website or you can set the form name when you create the form (see on image)

Step 4: Save the File

Once you have made any necessary modifications, save the functions.php file.

Step 5: Test the Functionality

Now, go to the page where your Elementor form is displayed and try submitting an email address. If the email address contains any of the blocked domains (e.g., Gmail, Yahoo, Hotmail, etc.), an error message will be displayed, indicating that only business email addresses are allowed.

Conclusion:

By following the steps outlined in this tutorial, you can easily enable the functionality to allow only business email addresses in the email field of your Elementor forms. This can be useful if you want to ensure that only professional email addresses are submitted through your forms. Remember that by default, the code snippet applies the validation to all Elementor forms. However, if you want to enable this functionality for a specific form, make sure to update the code as described in Step