Añadir reCaptcha al formulario de contacto de PrestaShop 1.6

El formulario de contacto de PrestaShop muchas veces se convierte en un coladero de contenido no deseado o spam.

Una de las formas más efectivas de combatirlo es con el reCaptcha que nos ofrece Google.

Aquí os explicamos cómo integrarlo en vuestra tienda sin necesidad de tener grandes conocimientos de programación.

Como verás, aprovecharemos el módulo gratuito eicaptcha para integrarlo.

Este módulo está diseñado inicialmente para añadir un reCaptcha en la página de creación de cuentas de PrestaShop

A continuación os mostraremos cómo aprovecharlo.

Configura tu reCaptcha en Google, desde este panel: Google (se abre en una pestaña nueva)

Cuando hayas terminado la configuración, te dará dos claves: la clave del sitio o clave pública y la clave privada

Descárgate el módulo gratuito desde aquí.

Después de descargarlo, instálalo con normalidad en tu tienda y configura los campos «Clave pública» y «Clave privada» con los datos que te ofrece el reCaptcha de Google en el paso 1.

Puedes activar la verificación en la creación de cuentas, si lo deseas.

Aquí viene la única complicación del proceso, y verás que es muy sencillo. Encuentra el archivo contact.tpl o contact-form.tpl de tu tema.

Lo encontrarás en /themes/TU_TEMA/contact.tpl o /themes/TU_TEMA/contact-form.tpl.

Para evitar disgustos, guarda una copia del archivo en tu equipo y luego edítalo con una aplicación como Notepad++

Debes encontrar el botón de envío del formulario; para esto busca (Ctrl+F):

1. <div class=«submit»>
2. <button type=«submit» name=«submitMessage» id=«submitMessage» class=«button btn btn-default button-medium»><span>{l s=’Send’}<i class=«icon-chevron-right right»></i></span></button>
3. </div>

En el tema por defecto, este fragmento suele estar alrededor de las líneas 140-150 del archivo.

Si en tu tema no encuentras el texto exacto, intenta buscar sólo

<div class=«submit»>

Lo más probable es que lo encuentres sin dificultad.

Una vez lo tengas ubicado, sólo tienes que añadir el siguiente código, cambiando CLAVE_PÚBLICA por la clave del sitio que te devolvió el reCaptcha de Google.

1. {if $captcha}
2. <p>
3. <script src=‘https://www.google.com/recaptcha/api.js’></script>
4. <div class=«g-recaptcha» data-sitekey=«CLAVE_PÚBLICA»></div>
5. </p>
6. {/if}

Guarda el archivo y reemplaza el que tienes en el servidor.

Al actualizar la página de contacto deberías ver el reCaptcha antes del botón de enviar

Por último, prueba a enviar un mensaje sin marcar la casilla y otro marcándola, para asegurarte de que todo funciona correctamente.