Cómo añadir confirmación de correo electrónico en Contact Form 7

Hay varios plugins de formularios de contacto que ofrecen un campo específico para que el usuario vuelva a introducir su correo electrónico, y así validar que el email que nos envía es el correcto y no se está equivocando.

El hecho de pedir la validación del correo electrónico, que lo confirme, aunque pueda parecer molesto, para el propietario de la web es fundamental, porque así te aseguras que el email con el que luego le responderás al formulario es correcto, a no ser que el usuario sea consistente a la hora de rellenar mal el su email más de una vez, que también podría ser, hay de todo.

Pero vamos, que lo normal es que la gente se lo piense, lo revise, y antes de poner de nuevo el email mire lo que ha puesto antes, y sino, siempre puedes hacer que el segundo campo confirme, o valide, los emails introducidos, avisando en caso de que no coincidan, lo que sería la mejor de las situaciones ¿verdad?

Bueno, que me lío…

Todas estas ventajas de tener un campo de confirmación del correo electrónico, que ya vienen por defecto en algunos plugins de formularios de contacto para WordPress, y que también podemos añadir a WooCommerce con unas líneas de código, no están por defecto disponibles en Contact Form 7, el plugin WordPress más popular, y el que más funcionalidades ofrece de manera gratuita.

Pues bien, mi objetivo con esta sencilla guía es que dejes de usar esos otros plugins de formularios de contacto solo porque Contact Form 7, por defecto, no tenga opción de confirmación del correo electrónico, añadiéndole esta funcionalidad, y verás qué fácil.

Lo haremos por pasos, y son solo dos.

Añade un campo de confirmación correo electrónico

Lo primero, para que los usuarios puedan confirmar su email es facilitarles un campo donde hacerlo ¿no?, pues ea, abre tu formulario de contacto de Contact Form 7, que vamos a agregarle otro campo de correo electrónico.

Esto es muy simple, solo tienes que añadir un nuevo campo de correo electrónico, preferiblemente cerca del anterior, con lo que tendrás 2 campos de correo electrónico, lo que en un formulario de contacto por defecto de Contact Form 7 quedaría más o menos con este código:

<label> Tu nombre
[text* your-name autocomplete:name] </label>

<label> Tu correo electrónico
[email* your-email autocomplete:email] </label>

<label> Confirma tu correo electrónico
[email* confirma-your-email]</label>

<label> Asunto
[text* your-subject] </label>

<label> Tu mensaje (opcional)
[textarea your-message] </label>

[submit "Enviar"]

Lo que, insertado en una página y visto en tu web quedaría tal que así…

Bien ¿no?

…

Pues no, ¡muy mal!, porque sí, tienes 2 campos de correo electrónico, pero son independientes, no tienen relación alguna entre ellos, y un visitante podría perfectamente poner dos emails diferentes en cada campo y aún así enviar el formulario.

Falta la validación, que el segundo campo de email compruebe si el correo electrónico que se le introduzca coincida con el introducido en el primer campo, y en caso contrario no deje enviar el formulario y avise del error al usuario. Con eso ya sería perfecto ¿cierto?

Configura la validación de los campos de correo electrónico

El segundo paso de este truco es crear un código que haga todo eso que nos falta:

• Leer el email introducido en el primer campo.
• Leer el email introducido en el campo de confirmación.
• Comprobar si ambos emails son iguales.
• Si ambos emails son iguales permitir el envío del formulario (si no lo impide otra regla, claro).
• Si ambos emails son diferentes, mostrar un mensaje de error y no permitir el envío del formulario hasta que ambos emails coincidan.

Y, todo eso, nos lo ofrece este bonito código:

/* Validar campos de confirmar email CF7 */
add_filter( 'wpcf7_validate_email*', 'custom_email_confirmation_validation_filter', 20, 2 );

function custom_email_confirmation_validation_filter( $result, $tag ) {
if ( 'confirma-your-email' == $tag->name ) {
$your_email = isset( $_POST['your-email'] ) ? trim( $_POST['your-email'] ) : '';
$your_email_confirm = isset( $_POST['confirma-your-email'] ) ? trim( $_POST['confirma-your-email'] ) : '';

if ( $your_email != $your_email_confirm ) {
$result->invalidate( $tag, "¿Seguro que esta es tu dirección de correo electrónico? Revísala, debe coincidir con la anterior." );
}
}

return $result;
}

¡Alto ahí!

No copies y pegues ya el código anterior, antes tienes que personalizarlo para que los campos de Contact Form 7 coincidan con los de tu formulario, así que debes confirmar cuales son los nombres de los campos de correo electrónico en tu formulario, y ponerlos en vez de los del formulario de ejemplo:

• your-email – Nombre del primer campo de correo electrónico
• confirma-your-email – Nombre del campo de correo electrónico para confirmar

No digo que tus campos se deban llamar así, sino que debes sustituir en el código esos nombres por los tuyos, los de tu formulario.

Una vez personalizado el código, guarda los cambios y, ahora sí, el formulario revisará los correos electrónicos para validar la confirmación, o en caso contrario avisar del error, como en la siguiente captura, que muestra el mensaje de error que pusimos en el código…

Si no sabes dónde añadir el código anterior revisa esta guía de cómo y dónde pegar códigos WordPress en mi web.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!