Este videotutorial se hizo a raíz de una publicación de un usuario de Divi en Español. Como a nosotros nos encanta ayudar, preparamos este contenido para todos aquellos que quieran aprender a configurar el sistema antispam de reCAPTCHA v3 de Google en Divi de forma nativa.
El spam en formularios es uno de esos problemas que parecen menores hasta que te llenan la bandeja de entrada con cientos de mensajes basura cada semana. Si tienes un formulario de contacto público en tu sitio, tarde o temprano los bots lo van a encontrar y a bombardear. La buena noticia es que Divi ya trae integrada la protección de reCAPTCHA v3 de Google, así que no necesitas instalar ningún plugin extra ni complicarte con configuraciones técnicas. Sin más que mencionar, vamos allá.
¿Qué es reCAPTCHA?
En primer lugar, ¿qué es esta cosa extraña llamada reCAPTCHA? La parte “re” es un tipo especial de "captcha" de Google.
La palabra captcha significa “Prueba de Turing pública completamente automatizada para distinguir computadoras y seres humanos”. Pero veamos qué es reCAPTCHA desde el propio concepto de su página:
“reCAPTCHA es un servicio gratuito que protege tu sitio web del spam y el abuso. reCAPTCHA utiliza un motor de análisis de riesgos avanzado y desafíos adaptativos para evitar que el software automatizado participe en actividades abusivas en tu sitio. Logra esto mientras permite que tus usuarios válidos pasen con facilidad”.
El reCAPTCHA es un recurso que nos ofrece gratuitamente Google que nos ahorra dolores de cabeza. Te permite disminuir o evitar el Spam que llega a través de los formularios de contacto o de registro que de tu web.
Gracias a San Google estamos protegidos de bots maliciosos que quieren explotar nuestra web. En este post te voy a mostrar como configurar uno de los mejores plugins de reCaptcha para WordPress.
¿En qué se diferencia reCAPTCHA v3 de las versiones anteriores?
Vale la pena entender por qué la versión 3 es la que recomiendo usar. Las versiones más viejas de reCAPTCHA, como la famosa v2, le pedían al usuario que marcara una casilla de "No soy un robot" o que seleccionara todas las imágenes con semáforos, autobuses o pasos de cebra. Funcionaban, pero generaban fricción: cada paso extra que le pides a un visitante antes de enviar un formulario es una oportunidad para que abandone el proceso.
reCAPTCHA v3 cambió por completo ese enfoque. En lugar de interrumpir al usuario con un desafío visible, trabaja de forma invisible en segundo plano analizando el comportamiento de quien navega tu sitio: cómo mueve el mouse, cómo escribe, cómo interactúa con la página. Con esa información le asigna una puntuación entre 0 y 1, donde los valores cercanos a 1 indican que muy probablemente es un humano legítimo y los cercanos a 0 sugieren un bot. El usuario nunca tiene que detenerse a resolver nada, lo que hace que la experiencia sea fluida y que tus tasas de conversión no se vean afectadas.
Consejo: para la mayoría de los sitios, reCAPTCHA v3 es la mejor opción justamente porque no molesta al visitante real. Si tu formulario es crítico para tu negocio (un formulario de cotización o de registro), la protección invisible te da seguridad sin sacrificar una sola conversión por culpa de un captcha molesto.
Configurar la clave API y clave secreta del reCAPTCHA de Google
El primer paso es verificar en tu módulo de formulario de contacto Divi o de suscripción y echar un vistazo a esta increíble función reCAPTCHA.
Desde hace algunas actualizaciones de Divi está disponible un nuevo conmutador de protección de spam o correo no deseado tanto en el formulario de contacto de Divi como en el módulo de suscripción de Divi.
Paso 1: Creamos las claves necesarias para el reCAPTCHA
El primer paso es obtener las claves API necesarias desde la página oficial de Google de reCAPTCHA. Por ello debemos entrar al panel de Google con cualquier cuenta de Gmail o Workspace que tengamos.
Entramos en “Gets the API Keys” y procedemos a obtener dichas claves. Es importante mencionar que la versión gratuita de este plugin funciona únicamente para los formularios de contacto, de registro, de acceso y de restablecer contraseña. Para cualquier formulario especial que nosotros tengamos en nuestro WordPress debemos comprar la versión prémium de este mismo plugin.
Puedes escoger la opción de reCAPTCHA v3, cuya forma de trabajar es que devuelve una puntuación por cada solicitud sin que el usuario tenga que hacer ninguna acción, lo que hace que la usabilidad de este sistema sea excelente.
El puntaje se basa en las interacciones con tu sitio web y le permite a Google tomar una decisión de aceptación o rechazo del comentario según el patrón de comportamiento del usuario.
Una vez que escojamos la opción v3, seguimos colocando los datos que nos pide Google.
En este caso te pide que coloques el o los dominios en los que quieres configurar el reCAPTCHA. Luego te solicita que seleccionemos la casilla de “Aceptar Términos del Servicio del Plugin” también el “Envió de alertas” y luego registrar.
Un detalle importante en este punto: cuando Google te pide los dominios, agrega todos los que vayas a usar, incluyendo subdominios si trabajas con un entorno de pruebas o staging. Si solo registras tu dominio principal y luego intentas usar las claves en un subdominio, reCAPTCHA no validará correctamente y los formularios pueden dejar de enviar. Registrar los dominios correctos desde el inicio te ahorra una de las causas más comunes de fallo en este proceso.
Una vez que hacemos esto, Google nos genera una "Clave del Sitio" y una "Clave secreta" que son las que colocaremos en los módulos de Divi respectivamente.
Paso 2: Configuramos las claves de reCAPTCHA en Divi
Una vez obtengamos estas claves realizarás los siguientes pasos para poder configurar el reCAPTCHA en tu módulo de contacto de Divi:
- Vamos a la pestaña de contenido en el formulario de contacto o de email optin de Divi.
- Seleccionamos: “Usar Spam Protection Service”
- Colocamos el nombre de la cuenta y pegamos la clave api previamente creada en el panel de Google con los campos correspondientes.
- Damos clic a “enviar”
¡Y listo! Con esto tienes el reCAPTCHA configurado en nuestro módulo de contacto de Divi para evitar todo ese horrible Spam de bots rusos y chinos. Así de simple es.
Recuerda que, como mencioné antes, tienes que repetir este proceso en cada formulario de tu sitio. No basta con configurarlo una vez: Divi maneja la protección a nivel de módulo, así que cada formulario de contacto y cada módulo de suscripción que tengas debe tener sus claves cargadas. Si te conviene, puedes guardar el módulo ya configurado en tu biblioteca de Divi para reutilizarlo sin tener que repetir el proceso desde cero cada vez.
Consejo: después de configurar el reCAPTCHA, haz siempre una prueba real enviando el formulario tú mismo. A veces todo parece correcto en el editor pero un dominio mal registrado o una clave pegada con un espacio de más impide el envío. Una prueba de treinta segundos te confirma que tus visitantes podrán contactarte sin problemas.
Algunas dudas que pueden surgir
- ¿Qué hago si todos los mensajes se van a spam?
Si llegas a presentar este problema, vas a tener que configurar tu correo SMTP. Para hacerlo, puedes seguir nuestro tutorial gratuito.
- ¿Tengo que hacer esto en cada formulario?
Sí, debes agregarlo a todos los formularios que coloques en tu web.
- ¿Cómo puedo aplicar el plugin a un formulario hecho a medida?
Para esto puedes encontrar una solución en la documentación reCAPTCHA de Google.
- No aparece el reCAPTCHA.
En caso de que siguieras los pasos y no aparezca el reCAPTCHA, puede deberse a un error al crear la API. Intenta volver a hacer todos los pasos anteriores para volver a generar las claves API.
¿reCAPTCHA v3 muestra el badge de Google en mi sitio?
Sí. reCAPTCHA v3 muestra un pequeño distintivo (badge) en la esquina inferior de la página, normalmente abajo a la derecha. Ese badge es un requisito de las condiciones de uso de Google cuando usas la protección invisible: indica al usuario que el sitio está protegido por reCAPTCHA. Google permite ocultarlo solo si incluyes el aviso correspondiente en tu política de privacidad, así que lo más sencillo y transparente es dejarlo visible.
¿El reCAPTCHA afecta a usuarios reales o conversiones?
Con la versión 3 prácticamente no. Al ser invisible, el visitante legítimo no nota nada y envía el formulario con normalidad. Esa es justamente la ventaja sobre los captchas con casillas o imágenes: proteges tu sitio del spam sin agregar ni un paso de fricción al usuario que sí quiere contactarte.
Comentarios finales
Como lo ves, es supersencillo poder configurar el sistema antispam reCAPTCHA de Google en Divi desde estas nuevas actualizaciones del tema. Recuerda que si quieres ver más de mis videotutoriales puedes suscribirte a mi canal de YouTube de ese modo te enterarás siempre que suba un nuevo videotutorial.
Tener tus formularios protegidos es uno de esos ajustes que rinden en silencio: dejas de perder tiempo filtrando mensajes basura y te aseguras de que los contactos reales lleguen limpios a tu bandeja. Y si quieres aprovechar a fondo todo lo que Divi puede hacer por tu sitio — más allá de la protección de formularios — en el Curso de Divi 5 completo te enseño a dominar el constructor de principio a fin, desde lo básico hasta las técnicas más avanzadas de diseño.
¡Muchas gracias! ¡No olvides compartir este contenido en tus redes sociales!
Nos vemos en el próximo videotutorial.
Comentarios
26 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Hola Jefferson,
He intenttado usar el plugin que recomiendas (de Bestwebsoft) pero la opción para proteger con Google reCaptacha el módulo de contacto de Divi sólo viene en su versión Pro que es de pago.
Conoces alguna opción gratiuta como las que hay para Contact Form 7?
Un saludo y gracias por adelantado!
Jose
Hola José, ¡Tarde pero seguro! Claro que si, acabamos de actualizar nuestro blog e incluimos como activar el recaptcha en Divi de forma gratuita, espero no sea muy tarde y aún te sirva. Saludos.
Hola, Cómo activar la opción para proteger con Google reCaptacha el módulo de contacto de Divi?
Hola Christian, si se puede, en el comentario anterior te lo comenté.
Hola, vi tu video y segupi todos los pasos. pero mi web a la hora de mostrar el captcha muestra un error que basicamente dice la respuesta es incorrecta. Esto pasa al llenar los datos comentario, correo y nombre inmediatamente al dar publicar comentario sale una pantallita negra y luego ese error sabes a que se debe
Hola Saray.
Estoy viendo que tu sistema de comentarios es diferente al que viene por defecto en WordPress ¿Estás usando algún plugin para ello?
Puedo estar seguro de que este sistema funciona para los comentarios nativos de WordPress, pero no para otros sistemas de comentarios que puedas integrar en el mismo a través de plugins.
¡Muchísimas gracias por el artículo!
¡Gracias por tu comentario Alicia!
Hola, mi recaptcha v3 no funciona en Divi y me he dado cuenta de que las claves están bien pero en la configuración del formulario la cuenta que me viene es el antiguo subdominio en el que se encontraba esta web y no aparece el botón de AÑADIR cuenta para cambiarla por el nuevo dominio. Sabrías decirme por qué es esto?
Muchas gracias de antemano
Recuerda que es necesario generar las claves API con el dominio actual que tiene tu sitio web, y no ningún otro diferente. Revisa ese punto.
Hola Jefferson! He seguido tus pasos tal y como indicas pero cuando acceso al formulario no me aparece el Recaptcha. Eso significa que está activado? porque accedo desde otra IP y no me sale nada, solamente el botón de enviar. Help please!
Hola Maite, si no te aparece el recaptcha puede ser que no este bien creada la clave API de Google. Recuerda que en este tutorial explicamos como poner el recaptcha en los comentarios de WordPress y también en los módulos de contacto de Divi, te invito a revisar nuevamente los pasos y verificar si no te dejaste alguno en el camino.
Hola Jefferson, creo el código y al querer insertarlo en divi form no me aparecen los campos para introducir los códigos.
En la parte inferior del video están los pasos para activarlo en el formulario de contacto. Estos no se muestran en el video porque son una opción que se creo posterior a la grabación del vídeo, pero allí en el texto esta paso a paso.
Hola Jefferson, gracias por tus tutoriales y tus artículos, me han sido muy útiles.
Instalé y configuré el plugis siguiendo todos los pasos y quedó bien instalado, el problema ahora es que todos los mensajes que son generados en los formularios llegan a la carpeta de Spam, situación que ha incomodado a algunos clientes.
¿Tienes alguna sugerencia para que lleguen directo a la bandeja de entrada?.
Muchas gracias y saludos desde México.
Hola Mara, claro, configura por favor tu correo SMTP, acá tenemos un par de tutoriales según lo necesites: https://uxdivi.com/?s=SMTP
Hola, muchas gracias por toda la información.
He hecho todos los pasos pero a la hora de crear cuenta en el formulario de divi, la creo pero luego en el desplegable no me deja seleccionar ninguna. Que nombre hay que ponerle a la cuenta? He probado con el dominio de la web y nada.
Que tal Ana, no entiendo muy bien lo que estás intentando hacer. Imagino que hablas del formulario de registro de cuenta de WordPress no? Si es así, el nombre a la cuenta debe ser un nombre de usuario, no un dominio como indicas en el comentario.
Gracias Jefferson! Perdón por no explicarme bien… me refería al modulo de contacto de Divi, el último paso del tutorial, donde hay que poner otra vez la clave secreta y la clave. Creo que ya esta solucionado, pues ya no recibimos spam. muchas gracias
¡Excelente Ana! Gracias por avisarnos, nos alegra mucho que te haya servido nuestro tutorial.
Hola estimado Jefferson!
Un cliente solicitó incluir una subida de archivo en su formulario, por lo que tuve que, el lugar del módulo de formulario que viene con DIVI, usar CF7 -el cual maqueto con el plugin DIVI Contact form 7-
Todo iba bien hasta que el cliente pidió agregar un método anti spam, por lo cual en CF7 agregué reCAPTCHA v3.
Me dice que está activado, pero no funciona ya que no está mostrando el logo de recaptcha, ni se mueven las métricas en la consola de google.
¿Es posible esta combinación DIVI + CF7 + reCAPTCHA V3? Si es posible, ¿qué me falta configurar?
La otra pregunta es, si esta combinación no es posible, ¿qué alternativa me sugieres para lograr tener un botón de subir archivos + medida antispam en DIVI?
Muchas gracias por tu tiempo, y aprovecho para comentarte lo satisfecho que estoy por tener una membresía en tu sitio, he aprendido mucho en este tiempo, ¡gracias!
Que tal Luis, en cualquier caso con cualquier plugin, se debe usar un sistema de reCaptcha, en este caso, si el sistema de reCaptcha de CF7 no está funcionando, hay que revisar si está correctamente generado el reCaptcha. En todo caso, también está este plugin que es una alternativa, funciona de forma nativa con Divi, y se pueden cargar archivos: https://uxdivi.com/blog/formulario-de-contacto-avanzando-para-divi-nativo
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Hola Jefferson, buen video.
Tenemos el formulario configurado, configuramos el V3 recaptcha correctamente y con el dominio correcto. En el sitio web, dentro de Divi en la opción selecionar Cuenta reCaptcha V3 aparecen 3 opciones pero no son las que yo tengo generadas en Google reCaptcha, y aunque en los tres puntitos pulso para agregar o conectar una cuenta nueva que yo creé no aparece la opción reemplazar. El tema es que no me deja quitar la cuenta actual de reCaptcha y no hay opción para poner una cuenta nueva, y eso no viene en tu video, como reemplazar cuenta.
¿Que podemos hacer?
Que tal Emilio, en el panel de las opciones de reCAPTCHA de Divi te debe aparecer la opción de eliminar cuenta, tal como ves en esta imagen: https://snipboard.io/Vv8JDw.jpg
Al eliminar la cuenta, puedes volver a configurar la que hayas creado nueva.
Jefferson, buenas tardes.
Todos los pasos funcionaron de lujo!
Una consulta, en el minuto 1:45, mencionas un curso para aprender a «implementar Captcha en los comentarios e inicio de WordPress».
De casualidad el curso ya estará disponible?
De antemano gracias!
¡Que tal Aldo, un gusto saludarte!
No sacamos tutorial sobre esto, pero básicamente puedes usar este plugin: https://wordpress.org/plugins/google-captcha/
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐