Este articulo va dedicado a todos usuarios que se ven afectados por los benditos “SPAM”. La solución hecha a la medida y que espero que les sirva para ahorrar tiempo y poder agregar un 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.
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”
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.
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”.
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.
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.
