Adding Email Verification Fields to the Divi Contact Form

Out of the box, there are a few handy tools that are missing from the standard Divi Contact Form module. One of those tools being a way to add email verification fields to your contact form.

Luckily, as with most things there is a javascript snippet to the rescue.

Place the following javascript in one these places:

• a code module after your form
• in your child theme JS file
• in one of the fields in the Integration tab under the Divi Theme Options

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(){
    var emailFieldID         = 'email_1',
    emailVerificationFieldID = 'email_2',
    errorMessage             = 'Email addresses do not match.';
	  
    var $verificationContainer = document.querySelector('[data-id="' + emailVerificationFieldID + '"]'),
    $messageElement            = document.createElement('span');
    $messageElement.classList.add('emailVerification--error');
    $messageElement.innerHTML  = errorMessage;
  
    var $email         = document.querySelector('[data-original_id="' + emailFieldID + '"]'),
    $emailVerification = document.querySelector('[data-original_id="' + emailVerificationFieldID + '"]');

    $emailVerification.addEventListener('change', verifyEmailMatch);
          
    function verifyEmailMatch(e){
				
      if( $verificationContainer.contains( $messageElement ) ) {
        $verificationContainer.removeChild( $messageElement );
      }
		
      if( $email.value !== $emailVerification.value ) {
        $verificationContainer.appendChild( $messageElement );
	$emailVerification.value = '';
      } 
    }
  });
</script>

Integrating the Script into Your Form

You only need to make a few changes to the above code to integrate it into your form. At the top of the script locate the following code:

var emailFieldID         = 'email_1',
emailVerificationFieldID = 'email_2',

Change email_1 and email_2 to the field IDs for your first email address field and your second email address field you want to use as the verification field.

Note: I recommend setting both of these email address fields to required fields in your form. If the email addresses given by the user do not match, the second field will be cleared and the error message will display. If both fields are required fields, the form will not submit until both fields match.

To customize the error message, find the part of the script at the top that looks like the following:

errorMessage             = 'Email addresses do not match.';

Change the string ‘Email addresses do not match.’ to any message you would like to display when the email fields do not match.

Styling the Error Message

If you’d like to add style to the error message, you can do by targeting the class emailVerification–error. For example:

.emailVerification--error {
  color: red;
  font-style: italic;
  font-weight: 300;
}