Añadir reCaptcha a formulario de contacto de Prestashop

De sobra es conocido el envío de correo desde los formularios de contacto de las páginas web, produciendo muchísimos dolores de cabeza, incluso marcando la IP de nuestro servidor en listas negras, haciendo que no podamos enviar y recibir correo correctamente.

Últimamente está surgiendo este problema en muchas de las tiendas online Prestashop relacionado con el formulario de contacto por defecto. Así que, vamos a explicar como poder insertar el reCaptcha de Google para evitar el envío masivo realizado por robots.

A continuación puedes ver un ejemplo en video, o leer cómo integrarlo paso a paso.

Creando un nuevo reCaptcha

  1. Entra en https://www.google.com/recaptcha, escribe el nombre de tu proyecto, selecciona el tipo de captcha (reCAPTCHA V2 o Invisible reCAPTCHA) y pulsa en Register.
  2. Anota la clave de sitio generada, ya que deberás usarla más adelante.

Insertando reCaptcha en Prestashop

Editar el archivo header.tpl de tu plantilla (/themes/<tu-tema>/header.tpl) y añade el siguiente código antes del cierre </head>:

<script src="https://www.google.com/recaptcha/api.js"></script>

Script recaptcha Prestashop

 

Edita el archivo contact-form.tpl (/themes/<tu-tema>/contact-form.tpl) y añade el siguiente código antes del botón de enviar:

<div class="g-recaptcha" data-sitekey="clave-de-sitio-a-copiar"></div>

Haz una copia del archivo “/controllers/front/ContactController.php” y mételo en el directorio “/override/controllers/front/ContactController.php”.

Edita este nuevo archivo. Al inicio de la función “postProcess”, aparecen varios “else if” donde se valida cada campo del formulario:

Validar reCaptcha Prestashop

Antes del “else”, añade una validación más para el captcha:

else if (!($gcaptcha = (int)(Tools::getValue('g-recaptcha-response'))))
    $this->errors[] = Tools::displayError('Captcha no verificado');

Validando Recaptcha

A partir de este momento, ya debe aparecer el captcha funcionando correctamente.

Recaptcha Formulario contacto Prestashop

Eso es todo, si tenéis alguna duda o conocéis alguna otra manera de evitar el envío masivo del formulario de contacto de prestashop, estaremos encantados de leer vuestras opiniones.

Añadir reCaptcha a formulario de contacto de Prestashop
5 / 5 de 1 voto

Rubén González Platas

Programador web. Ayudo a empresas y emprendedores a crear su web corporativa y canal de venta online. ¿Tienes un proyecto en mente y no sabes cómo llevarlo a cabo? Contacta conmigo y te ayudaré.

8 comentarios en “Añadir reCaptcha a formulario de contacto de Prestashop

  1. Hola Rubén gracias por tu explicación, es lo más cerca que he estado de solucionar el problema. Pero en override/controlers/front/ tenía otro contactcontroller.tpl del anterior módulo de captcha el v1.0.

    El caso es que me aparece el recpatcha v2 pero cuando envío el formulario de contacto me aparece que ocurrió un error al enviar el mensaje. Reviso todos los pasos y continúa.

    Muchas gracias por el aporte y un saludo

    • Hola David,
      Podrías probar a desactivar el captcha v1.0 y poner el nuevo código, por si entrara en conflicto tener ambos códigos. Por si acaso, haz un backup antes del fichero contactcontroller.tpl que comentas que tienes en /override.
      También decirte que he entado a tu web y he probado a enviar el formulario, pero me ha dado el error como dices. Abriendo la consola de Chrome he visto que tienes varios errores, que posiblemente no tengan nada que ver, pero nunca se sabe… en concreto, tienes un error en el código de facebook, cuando lanzas el evento “AddToCart”, porque envías la moneda sin comillas. Esto es lo que tienes:
      fbq(‘track’, ‘AddToCart’, {
      value: 1,
      currency: €,
      });

      Prueba a poner currency: ‘€’.

      Un saludo.

  2. Gracias por el tutorial muy pragmático.
    Una duda conoces alguna vulnerabilidad en el paquete https://github.com/dusterio/lumen-passport?

    Por último un pequeño detalle las imagenes del punto Modificar el modelo “User”, añadiendo el trait “HasApiTokens” y Abrir el archivo app/Providers/AuthServiceProvider, y añadir lo siguiente, estan invertidas. Saludos.

    • Hola,
      No conozco ninguna vulnerabilidad con este paquete, la verdad.
      Gracias por avisar del intercambio de imágenes, ya está corregido.

      Un saludo.

Deja un comentario