Como configurar el reCAPTCHA v3 nativo en los formularios de Divi

Inicio / Blog / Tema Divi / Como configurar el reCAPTCHA v3 nativo en los formularios de Divi

En este videotutorial veremos cómo configurar el sistema antispam de reCAPTCHA nativo que viene con Divi, tanto en los formularios de envío, como en los formularios de suscripción de Divi.

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.

Sin más que mencionar, vamos allá.

Índice

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

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.

Como configurar el reCAPTCHA v3 nativo en los formularios 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.

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.

Pegar clave API para reCaptcha de Google para WordPress

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”
Protección contra spam reCaptcha de Google
Configuración protección contra spam

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

Algunas dudas que pueden surgir

  1. ¿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.

  1. ¿Tengo que hacer esto en cada formulario?

Sí, debes agregarlo a todos los formularios que coloques en tu web.

  1. ¿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.

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

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.

También recuerda que en este tutorial te enseño a instalar WordPress de manera sencilla desde un panel de hosting de Siteground. Espero que te vuelvas fanático de WordPress como yo.

¡Muchas gracias! ¡No olvides compartir este contenido en tus redes sociales!

Nos vemos en el próximo videotutorial.

22 Comentarios

  1. Jose

    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

    Responder
    • Jefferson Maldonado

      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.

      Responder
      • christian mosquera

        Hola, Cómo activar la opción para proteger con Google reCaptacha el módulo de contacto de Divi?

        Responder
        • Jefferson M.

          Hola Christian, si se puede, en el comentario anterior te lo comenté.

          Responder
  2. Saray Dellan

    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

    Responder
    • Jefferson Maldonado

      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.

      Responder
  3. Alicia

    ¡Muchísimas gracias por el artículo!

    Responder
    • Jefferson M.

      ¡Gracias por tu comentario Alicia!

      Responder
  4. Elena

    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

    Responder
    • Jefferson M.

      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.

      Responder
  5. Maite

    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!

    Responder
    • Jefferson M.

      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.

      Responder
  6. christian mosquera

    Hola Jefferson, creo el código y al querer insertarlo en divi form no me aparecen los campos para introducir los códigos.

    Responder
    • Jefferson M.

      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.

      Responder
  7. Mara

    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.

    Responder
  8. Ana

    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.

    Responder
    • Jefferson M.

      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.

      Responder
      • Ana

        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

        Responder
        • Jefferson M.

          ¡Excelente Ana! Gracias por avisarnos, nos alegra mucho que te haya servido nuestro tutorial.

          Responder
  9. Luis Cabrera

    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!

    Responder
    • Jefferson M.

      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 😉🖐

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

BL Curso de WordPress Básico desde cero actualizado

Curso de WordPress Básico desde cero actualizado