Contact Form 7 Verify Email

So I was in a situation that I wanted to use Contact Form 7 and have two email fields that should match. The classic email verification functionality.

I’ve tried some plugins with no success and finally I’ve decided to make my own custom code to fix this.

So here what I did:

1) First of course install the Contact Form 7 plugin.

2) Make two fields like so

[email* email placeholder "Email"]
[email* email-confirm placeholder "Email Verification"]

3) Trigger the submit event of the form to check that your fields match

Create a JavaScript file like app.js inside your theme folder.

Then open your functions.php and include this code

function register_scripts() {
	if ( !is_admin() ) {
                // include your script
		wp_enqueue_script( 'app', get_bloginfo( 'template_url' ) . '/app.js' );
	}
}

add_action( 'wp_enqueue_scripts', 'register_scripts' );
// Inside your app.js paste this
// First we trigger the form submit event
jQuery( document ).ready( function () {
	jQuery('.wpcf7-submit').click(function () {
	        // We remove the error to avoid duplicate errors
		jQuery('.error').remove();

	        // We create a variable to store our error message
		var errorMsg = jQuery('Your emails do not match.');

	        // Then we check our values to see if they match
	        // If they do not match we display the error and we do not allow form to submit
		if (jQuery('.email').find('input').val() !== jQuery('.email-confirm').find('input').val()) {
			errorMsg.insertAfter(jQuery('.email-confirm').find('input'));

			return false;
		} else {
	                // If they do match we remove the error and we submit the form
			jQuery('.error').remove();

			return true;
		}
	});
} );

You can style the error as you wish to match your theme style.

Pretty simple and worked for me.

8 Comments

Andrew Walker

Which file do you add the above code to? Thanks!

Nontas Ravazoulas

Hi Andrew,
I updated the tutorial with all the necessary instructions.
If you have any questions please fill free to ask.

Thanks

Andrew Walker

Thanks. My situation may be slightly different in that I customized the CF7 with PGP contact to encrypt the message. I tried a few different things but wasn’t able to get your code to work with my setup (Am a novice though!). I am guessing I need to switch the .wpcf7-submit to another but am not sure what. Thanks anyway.

Nontas Ravazoulas

If you inspect your code in browser, you will see the exact class of your button, even thought it should be .wpcf7-submit if you haven’t modify the plugin…

Mahesh Waghmare

Can you replace ($) with (jQuery). Because, Developers copy above code and replace ($) with (jQuery). So, It is better to improve it in your article.

Mahesh Waghmare

By the way, Your trick is AWESOME…! Thank’s for sharing…!

Nontas Ravazoulas

@Riaan I guess this is the magic of the internet. That you can have multiple solutions…

Post a commnent