Home » Wordpress » Contact Form 7: Is there a 'Confirm E-mail' input type?

Contact Form 7: Is there a 'Confirm E-mail' input type?

Posted by: admin November 10, 2017 Leave a comment

Questions:

I am using the Contact Form 7 WordPress plugin to add contact forms to a website. The form needs to have a second field for the user’s email address, which is compared to the contents of the first to catch any typos. This is a very common element of contact and registration forms.

Is there a Contact Form 7 tag that can be used to implement this type of functionality? If not, can anyone who has modified the plugin to do this point me in the direction of a solution?

Answers:

Check this one out: http://wordpress.org/plugins/checkmail-validation-for-contact-form-7/

According to them:

Checkmail Validation for Contact Form 7 add the double check email field to your form and verify email match with the CF7 Ajax validation.

Double email check
This plugin add a new field in Contact Form 7 called “Checkmail” that allow to do a double email check when submitting the form. The new field will ask to users to confirm their email by typing it into a second field.

If you want to do this in your form, you only have to add the “Checkmail” field into the CF7 form and enter the email field name you want to check. The validation is done by the CF7 Ajax-powered style: when submitting form CF7 will do the double email check, if not match returns error and ask to users to verify the email addresses.

Questions:
Answers:

I was searching exactly this and got it worked other way for me fine.
Make two fields like below on the contact form-7 fields ..

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

Copy/Paste the below php code into your functions.php file

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

make sure to change the filepath to match and upload a js file with the below code into that path directory.

    // 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;
        }
    });
} );

I’ve used it in my site and working fine. Hope this helps anyone like me.

Reference: Contact Form 7 Verify Email

Questions:
Answers:

The plugin now has an official tutorial for this:

http://contactform7.com/2015/03/28/custom-validation/

Leave a Reply

Your email address will not be published. Required fields are marked *