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

31 de diciembre - 2021

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.

Suscríbete:

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.

Aspecto de un formulario en Divi
Ejemplo de página de contacto con formulario

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".

Módulo del formulario de contacto en Divi
Módulo del formulario de contacto en Divi

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".

Activar opción de reCAPTCHA v3 en Divi
Activar opción de reCAPTCHA v3

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.

Web para solicitar las claves reCAPTCHA
Web para solicitar las claves 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".
Opciones para crear un nuevo sitio en reCAPTCHA
Opciones para crear un nuevo sitio en reCAPTCHA

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.)

Claves para configurar el modulo del formulario de Divi
Claves para configurar el modulo del formulario de Divi

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.

Campos rellenados con 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.

Aviso de recaptcha v3 en Divi de Google
Aviso de reCaptcha v3 de Google

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.

Ocultar recaptcha v3 en Divi
reCaptcha oculto

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.

Código pegado en un módulo de texto de Divi
Código pegado en un módulo de texto

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.

Texto y enlaces del reCAPTCHA v3
Texto y enlaces del reCAPTCHA v3

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.

Imagen de fondo

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.

Imagen reCAPTCHA de fondo del módulo
Imagen de fondo del módulo

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
etiqueta de uso de reCAPTCHA v3 en Divi bajo el formulario
Etiqueta de uso de reCAPTCHA bajo el formulario

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.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento