Añadir reCAPTCHA en Elementor es una tarea importante a la hora de mejorar la seguridad de los formularios de tu sitio web.
Si no conoces reCAPTCHA, en este artículo quiero enseñarte exactamente varias cosas que te ayudarán a entender mejor cómo funciona este sistema de seguridad, cuál elegir de entre sus versiones disponibles y cómo implementar la mejor de estas versiones en Elementor.
Resumiendo, aquí vas a aprender:
- Qué es reCAPTCHA.
- Qué tipos de reCAPTCHA existen.
- Por qué elegir reCAPTCHA v3.
- ¿Es Google reCAPTCHA gratis?
- Cómo añadir reCAPTCHA v3 en Elementor a tus formularios.
Si prefieres el formato en imágenes y voz, te dejo a continuación un vídeo de mi canal de YouTube en el que te hablo también de todo esto.
Índice de contenidos
¿Qué es reCAPTCHA?
reCAPTCHA es un sistema de seguridad de Google que no permite el envío de spam desde cualquier formulario que esté implementado en la web de tu negocio (formularios de contacto, formularios de solicitud de presupuesto u otros similares).
Concretamente a lo que hace frente reCAPTCHA es a ese tipo de spam que es enviado por bots. O lo que es lo mismo, gracias a este sistema de seguridad se va a poder identificar si quién está enviando información a través de los formularios de tu web es un usuario humano o es un bot automatizado.
De este modo, evitarás recibir todos esos correos tan molestos con publicidad que no has solicitado y que te ofrecen objetos tan variopintos como pastillas de viagra o pago de enlaces SEO de dudosa calidad.
Qué tipos (versiones) de reCAPTCHA existen
En el momento en el que estoy escribiendo este artículo existen (o han existido) hasta 3 versiones distintas de reCAPTCHA.
Tenemos reCAPTCHA v1 (la versión original) en el cual se hacía introducir al usuario una palabra o texto generado automáticamente. Esta versión ya no se utiliza en la actualidad porque finalmente se consideró muy fácil de esquivar para los bots.
reCAPTCHA v2 supuso avanzar un poco más en este sistema de seguridad antispam, haciendo que el usuario tuviese que realizar un tipo de interacción algo más compleja.
Ejemplos de sistemas creados con reCAPTCHA v2 son esos filtros en los que tienes que clicar sobre ciertas imágenes que se te indican o la típica casilla de verificación de «No soy un robot».
Por último, existe también reCAPTCHA v3, la versión más actualizada y moderna de reCAPTCHA, la cual protege los formularios de tu web sin necesidad alguna de que el usuario realice ninguna interacción adicional como las anteriores (que, seamos honestos, pueden llegar a ser un engorro tremendo para los que sí somos humanos y no bots).
Básicamente, reCAPTCHA v3 evalúa al usuario que está enviando el formulario de contacto en base a su comportamiento en la red y su historial, por lo que de ese modo puede detectar si quién envía el formulario es un bot o no lo es.
Esta última versión de reCAPTCHA, la v3, es la que personalmente te recomiendo encarecidamente que uses en tu web. Te explico a continuación por qué.
Por qué usar reCAPTCHA v3 en tu web
La respuesta a esta cuestión es muy simple.
Ahora que ya conoces las distintas versiones que ha ido sacando reCAPTCHA, no me negarás que la más cómoda para el usuario es la de reCAPTCHA v3.
¿Por qué?
Pues muy sencillo: precisamente porque no requiere de ninguna acción por su parte.
El reCAPTCHA v3 se implementa en tu web y ya actúa de forma automática filtrando a los remitentes de correo que, debido al análisis de su actividad que realiza este sistema de seguridad, son detectados como spammers.
Por tanto, el usuario no tiene que hacer nada, lo que le supone mucha más comodidad y, sobre todo, muchos menos clics para enviarte el formulario.
En consecuencia, cuanto más fácil se lo pongamos a la gente y menos clics de ratón tengan que realizar, más fácilmente conseguiremos nuestro objetivo (en este caso, que rellenen nuestros formularios).
¿Es Google reCAPTCHA gratis?
Efectivamente, esto es lo mejor de todo.
Google reCAPTCHA es 100% gratis.
Es cierto que tiene una versión Enterprise que cuesta 1 dólar al mes por si quieres rizar el rizo, pero realmente no te hace falta.
Con la versión gratuita vas más que sobrado.
Ahora que sabes todo esto, imagino que quieres pasar a la acción, ¿no?
Cómo integrar reCAPTCHA v3 en Elementor a tus formularios
Añadir reCAPTCHA v3 a tu WordPress y a tus formularios creados con Elementor es muy sencillo, ya verás.
El proceso consta de tres simples pasos:
- Crear el Google reCAPTCHA v3 para tu dominio.
- Configurar las claves en los ajustes de Elementor.
- Añadir el campo reCAPTCHA v3 a tus formularios de Elementor.
Vamos a ver en profundidad cada uno de ellos.
Crear el Google reCAPTCHA v3 para tu dominio
Lo primero que tienes que hacer es dirigirte a la página oficial de Google reCAPTCHA.
En ella, verás tres opciones en su menú principal. A nosotros la que nos interesa es la que pone v3 Admin Console. Pulsa en ella.
Una vez allí, si es la primera vez que vas a crear un reCAPTCHA, te aparecerá directamente un formulario en el que tienes que introducir unos datos.
Concretamente estos datos son los siguientes:
Etiqueta: dale un nombre que quieras a tu reCAPTCHA para tenerlo identificado y saber a qué web va a pertenecer.
Tipo de reCAPTCHA: podrás seleccionar qué tipo de reCAPTCHA prefieres entre v2 y v3 (ya te dije que v1 estaba obsoleto y no se usa actualmente). Mi recomendación ya la sabes: utiliza reCAPTCHA v3.
Dominio/s: introduce aquí el dominio en el que vas a publicar tu reCAPTCHA. tienes que poner el dominio sin www y sin https delante (por ejemplo, en mi caso pondría «joseantoniocarreno.com«).
Propietarios: aquí puedes dejarlo como está, ya que aparecerá tu correo de Gmail, desde el que estás creando el reCAPTCHA, como propietario del mismo. También, si lo deseas, puedes añadir alguna dirección de correo más como propietario, pero no es necesario.
Acepta las condiciones del servicio reCAPTCHA: tienes que marcar esta casilla de verificación para aceptar los términos que rigen el servicio. De lo contrario, no podrás utilizar reCAPTCHA.
Enviar alertas a propietarios: si marcas esta opción, recibirás correo de alertas si Google detecta algo sospechoso como puede ser un aumento de tráfico poco normal o errores de configuración en tu reCAPTCHA. Yo te recomiendo que la marques para que se te notifique al correo acerca de todas estas actividades, pero es totalmente opcional.
Una vez rellenadas estas sencillas cuestiones, simplemente pulsa en el botón «Enviar«.
Cuando haces esto, si todo ha ido bien te aparecerán en pantalla unas claves de reCAPTCHA que serán las que tendrás que usar en tu sitio web (concretamente, en la configuración de Elementor).
Estas claves son la clave de sitio web y la clave secreta. Copia ambas. Nos harán falta en el siguiente paso.
Configurar las claves en los ajustes de Elementor
Accede a tu panel de administración de WordPress y ve hasta el apartado Elementor > Ajustes. Después, pulsa en la pestaña llamada Integraciones.
Aquí verás que la tercera integración que aparece es precisamente la de reCAPTCHA v3. Es en este apartado donde tendrás que pegar la clave del sitio web y la clave secreta que hemos copiado antes en Google reCAPTCHA.
La opción llamada Umbral de Puntuación (Score Threshold) puedes dejarla por defecto en 0.5 o ponerle otro valor que oscile entre 0 y 1.
Una vez introducidos estos datos, ve hasta la parte de abajo de esta misma pestaña de integraciones y pulsa en Guardar Cambios.
Añadir el campo reCAPTCHA v3 a tus formularios de Elementor
El siguiente paso es muy simple.
Dirígete a la página en la que tengas tu formulario (por ejemplo, Páginas > Todas las páginas > Contacto) y pulsa en Editar con Elementor.
Una vez dentro de Elementor, pulsa en el formulario que hayas creado previamente y que quieras proteger con reCAPTCHA v3 para editarlo. O crea uno nuevo si aún no tienes uno.
Ahora, ve al final de tu formulario y pulsa en el botón Añadir Elemento.
En Tipo, selecciona reCAPTCHA v3.
También puedes seleccionar la posición (Badge) donde aparecerá el símbolo que indica al usuario que los formularios están protegidos con Google reCAPTCHA v3 así como los enlaces a sus políticas y términos.
Mi recomendación es que elijas la posición Abajo Derecha (Bottom Right) para que moleste al usuario lo menos posible. Pero también puedes ponerlo abajo a la izquierda (Bottom Left) o directamente integrado en el formulario.
Cuando termines esta sencilla configuración, recuerda pulsar en el botón de Actualizar para que se guarden los cambios.
¡Ya está! Si todo ha ido bien ahora cuando entres en la página donde tienes el formulario de Elementor con el reCAPTCHA v3 te debería aparecer en la posición que hayas elegido el siguiente símbolo que verás en la imagen.
Con esto, ya tienes protegido tu formulario frente a los bots cuyo único fin es enviarte spam a través de ellos.
Recuerda también que si que realice por ti esta tarea, puedes solicitar un presupuesto a medida para ello rellenando mi cuestionario de soporte técnico.
Y, como siempre, puedes dejarme cualquier comentario sobre este tema un poco más abajo para seguir conversando sobre la integración de Google reCAPTCHA v3 con Elementor.
10 comentarios en «reCAPTCHA en Elementor: cómo evitar el spam en los formularios de tu web»
Muy buen artículo!!
Muchas gracias, Xavier!
Muy bueno! muchas gracias
A ti por tu feedback y tu comentario!
Gracias José! Gracias por el artículo!
¿Sabes si es posible incluir reCAPTCHA v3 a los formularios de Active Campaing? He estado investigando y no encuentro información.
Hola Nuria. Sí, claro que se puede. De hecho, lo puedes hacer con este mismo método si creas tus formularios de suscripción con el propio Elementor, no hay diferencia alguna.
Saludos.
Hola, he seguido todos los pasos y en una web con Elementor me funciona y en otra, también hecha con Elementor, no. ¿Alguna idea de porqué?
Muchas gracias! Ha sido muy útil.
De nada, Xenia.
Saludos.
muy bueno, gracias!