Añadir reCAPTCHA v3 al formulario de contancto en el tema Divi

Cada vez es más habitual encontrar formularios de contacto en los que no hay que interactuar para verificar si eres un robot o no. El reCAPTCHA v3 de Google que usaremos en Divi, utiliza una tecnología avanzada con la que ya no hay que marcar ninguna casilla ni elegir imágenes para verificar tu identidad. Es una opción de verificación invisible.

Divi ha sido uno de los que ha incluido la opción de añadir esta tecnología, pero no es el único, otros formularios tan conocidos cono "contact form 7" también lo han incorporado. Por otro lado, aún existen plugins que admiten versiones anteriores del reCaptcha como "Ninja Forms" o "WPForms", donde se puede elegir la utilización del reCAPTCHA v3 invisible o la opción de marcar la casilla de aceptación.

Al incorporar el reCAPTCHA a un formulario de Divi, aparece en la esquina inferior derecha una imagen indicando su utilización. Pero la incorporación de chats, botones o pies de página con contenido personalizado en algunas webs, convierten este aviso del uso de reCAPTCHA v3 de Google en una molestia más que en una advertencia.

A lo largo del artículo veremos como podemos ocultarlo y avisar de su utilización siguiendo las normas que indica el mismo Google en su documentación.

Configurar reCAPTCHA v3 en el módulo del formulario de Divi

Como ya indicaba más arriba, Divi sólo admite la utilización del reCAPTCHA v3 invisible en el módulo del formulario. Si no te gusta o quieres utilizar la versión anterior, hay que instalar otro plugin de formulario que si lo admita.

El uso de la verificación para determinar si eres o no un robot, no es necesario para tener un formulario totalmente funcional, pero nos ayudará a filtrar muchos de los correos enviados a través de este medio si lo tengamos implementado.

Crear un formulario en Divi

Una de las mayores ventajas que tiene Divi es la incorporación al tema de multitud de opciones que evitan que tengamos que instalar plugins adicionales. Podemos crear una página de contacto completa sin necesidad de añadir más complementos.

En la imagen anterior, dentro de la página de contacto, hemos utilizado diferentes módulos incluidos en Divi según los necesitábamos o según el diseño que teníamos en mente, en otros temas habríamos tenido que instalar por un lado el plugin del formulario y el plugin de mapa de situación.

Si no colocamos un formulario, todo ese contenido no deja de ser una información estática para mostrar cosas al visitante de la web, pero lo interesante es crear un vínculo dinámico con el que conseguir una interacción entre el usuario y el dueño de la web. Crear un canal directo de comunicación que muestre que existe alguien detrás que puede resolver las dudas que tenga.

El módulo de formulario dispone de lo necesario para crear todos los campos que necesitamos para cualquier situación, incluso crear condicionales para mostrar u ocultar campos según se rellenando las casillas. Tal vez tenga que seguir evolucionando un poco más hasta conseguir incorporar un campo que permita adjuntar archivos como hace "Contact Form 7".

Activar reCAPTCHA v3 en el formulario

En las opciones de la pestaña "Contenido" del módulo encontramos una opción llamada "Spam Protection" desde donde podemos activar dos tipos de reCAPTCHA, uno básico del propio formulario y la integración con el servicio gratuito de Google.

Para activar el reCAPTCHA del proveedor externo activamos la pestaña correspondiente y picamos en el botón "Añadir".

Solicitar las claves de conexión

Para poder conectar nuestra web con los servicios de Google se necesitan 2 códigos especiales: la clave del sitio web y la clave secreta; que conseguiremos teniendo una cuenta de Google y accediendo al servicio gratuito de reCAPTCHA.

Al entrar en la consola de administración añadimos un nuevo sitio para solicitar las claves. Los datos a rellenar son:

• Etiqueta para identificar las claves en caso de solicitar más para otros sitios.
• Seleccionamos el tipo de reCAPTCHA v3
• Añadimos el dominio de nuestra web para asegurarnos que solo se utilizará en ese sitio y nadie podrá utilizar las claves en otra web diferente.
• El propietario aparecerá automáticamente y es la cuenta de Google con la que has accedido al servicio.
• Aceptamos las condiciones y pulsamos "Enviar".

En el momento de aceptar, la pantalla cambiará y aparecerán las claves para que las podamos copiar y pegar en Divi. No pasa nada si cerramos la ventana porque podremos consultar las claves las veces que queramos desde la pantalla del nuevo sitio que hemos configurado.

(NOTA: Tanto la cuenta como las claves se han generado temporalmente para realizar el artículo. Si estás pensando en utilizarlas, debes saber que cuando leas este tutorial ya no estarán activas.)

Trasladamos estas claves al módulo de nuestra web y terminamos de configurar el reCAPTCHA v3 en Divi guardando los cambios. A partir de ahora ya estaremos protegidos frente al spam según el nivel que elijamos, donde el valor 0 permite más la interacción de bots y 1 nos protege más. Lo normal es dejarlo en 0.5 y modificarlo según analicemos con el tiempo como nos llegan los mensajes.

El nombre de la cuenta no es obligatorio ponerlo, pero podemos escribir el mismo que utilizamos en la página web del reCAPTCHA al solicitar las claves.

Ocultar el aviso con la insignia (badge) de la utilización de reCAPTCHA v3

Cada vez que se acceda a la página del formulario, en la esquina inferior derecha aparece el logotipo, insignia, badge... como lo quieras llamar, como que hemos integrado el servicio de reCAPTCHA v3 en Divi.

Para mucha gente esto es muy molesto porque puede dificultar la vista de otros elementos, o estropear el diseño de la página. Existen varias formas de ocultarlo, incluso la ayuda de Google expone un método para hacerlo que es el que vamos a utilizar. Pero cuidado, a Google no le gustará que utilicemos sus servicios y no lo indiquemos en ninguna parte, esto lo arreglaremos más adelante.

Añadir código CSS para ocultar el aviso

Estas líneas de código ocultan el aviso de la esquina inferior derecha, podemos acceder a la web de ayuda de Google para copiarlo desde ahí en caso de que no funcione el que os dejo aquí, ya que puede sufrir actualizaciones y dejar de ser efectivo.

El código lo pegamos en la pestaña "CSS adicional" del personalizador de WordPress.

Indicar la utilización del reCaptcha

Aquí tenemos plena libertad para colocar el como queramos, pero lo más aconsejable es ponerlo al lado del formulario y cerca del botón de enviar. Puesto que es un servicio externo debemos incluir los enlaces a las políticas de privacidad y términos de uso de Google.

En la misma página de ayuda de Google, que podemos consultar en caso de dudas, encontramos el código necesario para un copia-pega básico y salvar la situación.

El código anterior podemos pegarlo en un módulo de código justo después del módulo del formulario, o utilizar un módulo de texto (pestaña "Texto") para poder utilizar las opciones que ofrece para ajustar el diseño.

Añadir imagen del reCAPTCHA con enlaces bajo el formulario

Podemos hacerlo más profesional y utilizar el módulo de texto con una imagen de fondo, al estilo del aviso que aparecía en la esquina, añadiendo los enlaces y colocándolo donde nosotros queramos.

En el apartado de "Texto" colocamos el texto y los enlaces que apuntan a la privacidad y términos del servicio, igual que en el apartado anterior pero con el siguiente código que incluye ya los enlaces y los espacios necesarios para que quede todo en su sitio.

En la opción del fondo colocamos la imagen con el símbolo del reCAPTCHA, que os la dejo a continuación para que lo podáis utilizar, os ponéis encima y con el botón de la derecha del ratón picáis en guardar o descargar al ordenador.

Las opciones de la imagen las dejamos como indico a continuación, normalmente son las que aparecen por defecto:

• Usar efecto de paralaje: No
• Imagen de fondo de tamaño: Cubierta
• Imagen de fondo de la posición: Centro
• Repetición de la imagen de fondo: No repetir
• Mezcla de la imagen de fondo: Normal

En principio se mostrará con un aspecto desproporcionado, pero lo arreglamos en el siguiente paso.

Para ajustar el aspecto final abrimos la pestaña "Diseño" y lo configuramos de la siguiente forma:

Opción TEXTO:

• Justificado a la izquierda, fuente "Roboto", color blanco, tamaño de 13px y altura de línea 1.5em
• En la opción de los enlaces elegimos un estilo subrayado, color blanco y un tamaño de texto de 10px

Opción TAMAÑO:

• En la anchura elegimos 256px y de altura 60px

Opción SEPARACIÓN:

• En la parte de Relleno añadimos 10px en "Superior" y 15px en "Izquierda"

Opción SOMBRA DE LA CAJA:

• Seleccionamos la sombra exterior homegénea (igual por todos los lados)
• Movemos todos los valores a 0px menos "Box Shadow Blur Strength" que marcamos 2px
• Escogemos un color negro y le añadimos transparencia hasta un 0.3

Una vez creado la etiqueta, puede que necesitemos ajustar su ubicación y arreglar los márgenes para que no pegue con el resto de elementos, pero eso ya es una cuestión más personal que se puede solucionar ajustando las separaciones del módulo.

Ahora si que cumples con todas las reglas y tendrás a Google contento, pero si no quieres regalarle algo de SEO de tu web al gigante de internet, en los enlaces que hemos incrustado puedes añadir la relación "nofollow". Lo dejo en tus manos.