El otro día publiqué cómo añadir un campo de confirmación de correo electrónico con validación si usas Contact Form 7, y Enric, con buen criterio, me preguntó que cómo hacer esto mismo con los formularios de contacto de Divi, porque sí, porque los usuarios de Divi lo merecen, y es uno de los temas más utilizados, así que vamos a ello…

Índice de contenidos

Cómo añadir un campo en el que confirmar el correo electrónico de un formulario de Divi

La primera parte de este truco es la mar de sencilla, solo tienes que añadir un nuevo campo de correo electrónico a tu formulario de Divi, no tiene misterios, se añade como cualquier otro campo, lo colocas a continuación del anterior y casi está.

Otra manera sería duplicar o clonar el campo de email ya creado, algo que te valdría perfectamente.

Solo te recomiendo un par de detalles:

Marca para que ambos campos sean obligatorios.
Pon a ambos campos un identificador único, a ser posible en minúsculas y sin cosas raras, por ejemplo: email1 y email2.

¡Primera parte conseguida, ya casi lo tienes!

Cómo añadir validación de la confirmación de correo electrónico en el formulario de Divi

Ahora ya tenemos un formulario con dos campos de correo electrónico, y en uno de ellos además hemos sido muy coquetos y le hemos puesto un texto para que quede claro que es para confirmar el correo, pero algo falla: deja enviar los correos aunque el cliente ponga distintos emails.

Eso es porque falta un código que compruebe que las direcciones de correo electrónico introducidas en ambos campos coinciden, que nos avise en caso de error (sería lo ideal) y, por supuesto, que no deje enviar el formulario hasta que no coincidan las dos direcciones de email ¿estamos de acuerdo?

Ea, pues el código que hace todo eso es este bonito JavaScript:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(){
    var emailFieldID         = 'email1',
    emailVerificationFieldID = 'email2',
    errorMessage             = 'Las direcciones de correo no coinciden.';
  
    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>

¿A que es muy cuqui?

Pues no lo copies y pegues ya como está, esperaaaaa…

Hay unas cosillas que debes modificar para adaptar el código a tu web, a tu formulario, a saber:

- emailFieldID– ID de Divi del primer campo de correo electrónico.

- emailVerificationFieldID – ID de Divi del segundo campo de correo electrónico.

- errorMessage – Mensaje de error que quieres que se muestre bajo el campo de confirmación de email en caso de que no coincidan ambos.

También puedes dejar el código como está y usar los IDs del mismo para tu formulario, valdría perfectamente, si los cambias, por supuesto.

¿Dónde debería pegar este código?

Normalmente te diría que copies y pegues el código en cualquier parte: el tema hijo, un plugin de funciones, la pantalla de integración de códigos de las opciones del mismo Divi, pero en este caso no va a ser así.

Al ser un código que solo afecta a un formulario de contacto, que solo estará en la página en la que lo hayas añadido, lo que te recomiendo en esta ocasión es que añadas un módulo Divi de código justo detrás del módulo de formulario, en la misma fila y sección, y sea ahí donde añadas el código.

De este modo el código JavaScript únicamente se cargará en la página en la que está tu formulario, lo que es la situación óptima de cara al rendimiento de la web, porque así no cargas el JavaScript en toda la web, cuando en realidad solo lo necesitas para una página, que suele ser lo habitual en estos casos.

El resultado, por supuesto, es perfecto… ¿lo dudabas?

Por cierto, por defecto el texto de error no saldrá como en la captura, si lo quieres igualito solo tienes que añadir un poco de CSS adicional, este:

/* Estilos error verificacion email */
.emailVerification--error {
color: red;
font-style: italic;
font-weight: 400;
}

Ya está, espero que te haya servido para tus formularios. El hecho de pedir confirmación de emails es una salvaguarda, a veces importante, para no perder contactos o clientes por errores de tecleo y cosas tontas, fácilmente solucionables con trucos como este ¿verdad?