Email confirmation on Wordpress Contact Form 7

README.md

This is a way to validate email by double email fields. Validation is via Javascript.

Files layout is:

../your-child-theme
    |- functions.php
    |- js/email-confirm.js

email-confirm.js

// 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('<span class="error">Your emails do not match.</span>');
        // 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;
        }
    });
} );

functions.php

<?php
//
//  Hook for double check of email addresses.
//  Taken from: http://stackoverflow.com/questions/6255367/contact-form-7-is-there-a-confirm-e-mail-input-type
//

function register_scripts() {
  if ( !is_admin() ) {
    // include your script    
    wp_enqueue_script( 'email-confirm', get_stylesheet_directory_uri() . '/js/email-confirm.js' );
  }
}

add_action( 'wp_enqueue_scripts', 'register_scripts' );