Si tienes un formulario en tu tienda Shopify que envía datos a través de una integración con Make.com, es probable que en algún momento hayas tenido que lidiar con envíos automáticos de bots. Esto no solo genera spam, sino que también puede afectar el rendimiento de tu tienda, entorpecer tu proceso de automatización y gastar operaciones de Make.com. Google reCAPTCHA podría ser una opción, pero no siempre es ideal si buscas una solución que no complique la integración en Make.com.
Aquí te explico cómo puedes proteger tu formulario usando solo JavaScript. Esta técnica es efectiva, especialmente porque muchos bots no procesan JavaScript, y te ayudará a evitar el spam sin depender de soluciones de terceros.
1. Deja el atributo action del formulario vacío en HTML
El primer paso es modificar el formulario en HTML para que el atributo action esté vacío. De esta forma, los bots que intenten enviar el formulario sin ejecutar JavaScript se encontrarán con una ruta vacía, lo que genera un error y evita que el formulario llegue a Make.com.
Aquí te muestro cómo debe quedar tu formulario en HTML:
<form id="contact_form" action="" method="POST">
<!-- Tu contenido del formulario aquí -->
</form>2. Usa JavaScript para asignar el action dinámicamente
Para que el formulario funcione correctamente para los usuarios legítimos, debes asignar el action al cargar la página mediante JavaScript. Esto asegura que el formulario solo se envíe a la URL de Make.com cuando la página se haya cargado completamente en un navegador que soporte JavaScript. Añade el siguiente código JavaScript:
document.addEventListener("DOMContentLoaded", function () {
document
.getElementById("contact_form")
.setAttribute("action", "[LA_URL_DONDE_ENVÍAS_LOS_DATOS]");
});¿Por qué esta técnica es efectiva?
Esta solución funciona porque los bots que no interpretan JavaScript no pueden establecer el action del formulario, y al intentar enviarlo a una URL vacía, fallarán. Además, como la URL de Make.com no está visible en el HTML, los bots no pueden acceder a ella directamente para realizar envíos de spam.
Consideraciones finales
-
Pruebas en distintos navegadores: Antes de lanzar esta actualización, asegúrate de probar tu formulario en varios navegadores para verificar que el action se asigna correctamente.
-
Campos adicionales para mayor seguridad: Si necesitas más protección, puedes agregar un campo oculto que solo se llene mediante JavaScript y verificar su presencia en el servidor antes de aceptar envíos.