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.

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

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 Contact Form 7

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”

 

seleccionar tipo de recaptcha para formulario de contacto con contact form 7

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 recaptcha google clave sitio y clave secreta

Claves de Google reCAPTCHA

 

En el siguiente apartado vamos a ver donde tenemos que pegar estas claves.

 

Aún no te has decidido por una plantilla para Wordporess. Aquí tienes un post sobre las TOP Mejores plantillas WordPress

 

 

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

 

configuración integración de formulario de contacto realizado con contact form 7 y Google recaptcha

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 ReCaptcha V2 for Contact Form 7 para integrar contact form 7 y google recaptcha

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.

 

introducir shortcode recaptcha en contact form 7

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.

 

Insertar recaptcha a través de shortcode con opciones configuración

Shortcode configurable reCAPTCHA

 

Mega guía de la plantilla Divi, Todo lo que has de saber sobre esta increible plantilla para WordPress + Super Descuento: Mega guía Divi

 

 

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.

 

insertar shortcode formulario contacto contact form 7 en página

Shortcode de formulario para insertar en página de wordpress

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO ELEMENTOR (14 Clases)
4.- CURSO BLOOM + MAILCHIMP (7 Clases)
5.- CURSO SEO (19 Clases)
6.- CURSO BLOG WORDPRESS (32 Clases)
7.- CURSO WOOCOMMERCE (39 Clases)
8.- CURSO FLATSOME WORDPRESS (36 Clases)
9.- CURSO COLORES WEB (9 Clases)
10.- CURSO ANALYTICS (10 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.