He decidido escribir este post porque he visto que ya no es tan fácil como antes el añadir un reCAPTCHA a un formulario de contacto realizado con Contact Form 7.
Hace poco tuve que insertar uno y me sorprendió encontrar que ya no era tan fácil y directo añadir un reCAPTCHA. Me hubiera gustado encontrar un post actualizado que describiera el proceso, pero no lo encontré. Así, que tuve que estar investigando.
Por lo que finalmente me decidí a escribir este post que va directo al grano y que espero que os sirva para ahorraros tiempo para añadir un reCAPTCHA a Contact Form 7.
Si lo que buscas es un tutorial de Contact form 7 aquí lo tienes: Tutorial Contact Form 7 (incluye vídeo)
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE AÑADIR RECAPTCHA A CONTACT FORM 7
1.- Integración reCAPTCHA en Contact Form 7
Para comenzar la integración debes ir a: “Contacto > Integración”
A continuación, verás un bloque denominado “reCAPTCHA”, y en este bloque veras dos enlaces:
- a.- Enlace para registrar sitio web en reCAPTCHA Google: en la parte superior tienes un enlace para ir a la página de registro de Google reCAPTCHA y obtener las claves necesarias para la integración. El enlace es este: Registro Google reCAPTCHA
- b.- Botón Integración de la instalación: en la parte inferior veremos un bloque que nos permitirá introducir las claves que obtengamos en el apartado anterior.
Integración reCAPTCHA Google en el plugin Contact Form 7
1.1.- Registrar sitio en Google reCAPTCHA y obtener claves
En primer lugar, haremos clic en el enlace que aparece en la parte superior para poder registrar nuestra web en Google reCAPTCHA.
Necesitaremos, como es habitual en todos los servicios de Google, disponer de un Gmail para poder acceder a este servicio. Una vez hagamos clic en el enlace, procederemos a hacer clic en el botón “Admin console” que aparece en la parte superior para registrar nuestra web.
Si no tienes registrado aún ninguna web te saldrá directamente el formulario para el registro. Si ya tienes alguna web tendrás que hacer clic en el enlace para añadir una nueva web.
Los campos que tendrás que rellenar son:
- a.- Etiqueta: aquí pondremos el dominio de nuestra web. Por ejemplo, horizonweb.es
- b.- Tipo de reCAPTCHA: a mí me gusta el reCAPTCHA V2 tipo “No soy un robot”. Para establecer dicho reCAPTCHA elegiremos “reCAPTCHA V2” y luego la opción: Casilla de verificación «No soy un robot”. Si quieres puedes utilizar otro modelo de reCAPTCHA diferente, a mí es que me gusta mucho el tipo V2. Aquí tienes todas las opciones: Opciones reCAPTCHA Google
- c.- Dominios: aquí pondremos el dominio de nuestra web. Por ejemplo: horizonweb.es
- d.- Aceptar políticas: a continuación marcaremos los chcekbox de aceptación de la condiciones del servicio de reCAPTCHA y el de enviar alertas a los propietarios.
Finalmente haremos clic en el botón “ENVIAR”
Registro de nuevo sitio y configuración Google reCAPTCHA
Verás que se te mostrarán dos claves asociadas a este registro en Google reCAPTCHA. Concretamente, la clave de sitio y la clave secreta.
Claves de Google reCAPTCHA
En el siguiente apartado vamos a ver donde tenemos que pegar estas claves.
1.2.- Integrar reCAPTCHA en Contact Form7 a través de las claves obtenidas
Ahora volvemos a nuestro WordPress y vamos a: “Contacto > Integración” y hacemos clic en el botón: “Integración de la instalación” del bloque: “reCAPTCHA”
Introduciremos la clave del sitio y la clave secreta obtenida en el apartado anterior, y haremos clic en el botón “Guardar cambios”.
Claves integración Google reCAPTCHA y Contact Form 7
Si la integración ha sido correcta se te mostrará el bloque reCAPTCHA con un texto que dice: “reCAPTCHA está activo en este sitio”.
2.- Instalar plugin ReCaptcha V2 for Contact Form 7
Ahora procederemos a instalar el plugin gratuito ReCaptcha V2 for Contact Form 7 y a activarlo.
Para eso, iremos a: “Plugins > Añadir nuevo” y en la barra de búsqueda escribiremos: “ReCaptcha V2 for Contact Form 7”. Una vez localizado, haremos clic en: “Instalar ahora”.
Una vez instalado haremos clic en: “Activar”.
Plugin gratuito para integrar Contact Form 7 y Google reCAPTCHA
Para configurar el plugin iremos a: “Contacto > Versión de reCAPTCHA” y lo configuraremos de la siguiente manera:
- a.- Seleccionar el uso de reCAPTCHA: seleccionaremos “reCAPTCHA versión 2”
- b.- Seleccionar la fuente de reCAPTCHA: seleccionamos “google.com”
y haremos clic en el botón “Enviar”.
3.- Añadir shortcode [recaptcha]
Finalmente, procederemos a insertar el shortcode [recaptcha] en el formulario que previamente hayamos creado con Contact Form 7
Disponemos de dos formas de insertar el shortcode:
a.- Inserción directa: este método consiste en directamente insertar el shortcode [recaptcha] en el formulario que hayamos creado previamente. En este caso no podremos seleccionar ninguna opción de personalización.
Introducimos en shortcode [recaptcha]
b.- Inserción con opciones: también podemos hacer clic en la pestaña “reCAPTCHA”, configurar las opciones del reCAPTCHA e insertar el shortcode. Configura las opciones: Tamaño, Tema y Alignment para personalizar el diseño del reCAPTCHA y finalmente haz clic en el botón “Insertar Etiqueta”.
Lo habitual es desplazar el shortcode para colocarlo justo debajo del área de texto del formulario de contacto y guarda el formulario.
Shortcode configurable reCAPTCHA
4.- Insertar shortcode formulario en página
En este post se da por sabido lo relacionado con la creación del formulario con Contact Form 7 y la inserción en una página. Pero, quiero recordar en este apartado, que para insertar el formulario en una página de wordpress, deberemos insertar el shortcode del formulario en cuestión generado por Contact Form 7.
Para ver el shortcode, debemos ir a “Contacto > Formularios de contacto” y copiar el shortcode del formulario que queramos insertar. Posteriormente lo introduciremos en la página donde queramos mostrar el formulario.
Shortcode de formulario para insertar en página de wordpress
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Muchas gracias! He conseguido instalarlo. Solo una única cosa. Cuando se envía el mensaje del formulario sale el mensaje: enviado con éxito y vuelve a salir el símbolo para marcar «no soy un robot», se podría quitar? Mil gracias
Hola estimado, pude instalar el Recaptcha en mi formulario de contacto sin problema, pero al enviar un correo de prueba desde mi web, no me llegan los mensajes. Me ayudas plis
Buenas Daniela.
Mira en la carpeta de Spam por si te están llegando allí. En caso de que no sea así, contacta con tu empresa de hosting para que te verifiquen si tu wordpress está o no enviando correos. o si por el contrario tienes que instalarte un plugin de SMTP
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso actualizaciones y seguridad en WordPress, Curso diseñador web Freelance, Curso como gestionar un Blog, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc. (más de 30 cursos y un recurso caduco cada mes)
Hola, muchas gracias por la guia pero tengo un incoveniente, yo puse el Recatcha en mi Form 7 pero no se muestra. No se supone que visualmente se note en el sitio que esta protegido el formulario?, como puedo saber que funciona bien?
Buenas, dependiendo del tipo de recpatcha se muestra o no. Aquí tienes las diferencias entre el v2 y v3: https://www.smythsys.es/11400/diferencias-entre-recaptcha-v2-y-recaptcha-v3/
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso actualizaciones y seguridad en WordPress, Curso diseñador web Freelance, Curso como gestionar un Blog, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc. (más de 30 cursos)
El captcha no aparece. Parece todo correcto y simplemente no se muestra el reCaptcha v2 en el formulario.
como se puede traducir el mensaje de Please verify that you are not a robot.
Excelente tu post me ayuda a salir del bache.
Hola Israel,
me alegro que te haya servido este post sobre el recpatcha en Contact form 7. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Gracias por el post, ¡¡la explicación es perfecta!!
Hola María.
Me alegro que te haya gustado el post de recaptcha para contact form 7. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.