Cargando......

Antispam en formularios web con CSS y Javascript
Antispam en formularios web con CSS y Javascript
  • 12 de septiembre de 2022

A todos los que tenemos formularios en nuestras páginas web, más pronto que tarde, nos toca lidiar con los mensajes de spam. Estos mensajes nos llegan por correo electrónico, en comentarios de nuestras entradas,... Cualquier formulario para interactuar con los visitantes de la web es susceptible de recibir spam.

Este spam es generado utilizando bots que recorren internet buscando formularios desprotegidos, los cumplimentan y los envían de manera automática. El resultado es que nuestra bandeja de entrada se llena de decenas de correos basura.

Para evitar el envío de estos correos existen varías técnicas: sistemas CATCHA, presuponer un tiempo mínimo para cumplimentar el formulario, uso de campos ocultos en el formulario,...
En este artículo explicaremos como implementar el último método mediante CSS y Javascript.

Evitar el spam mediante campos ocultos

Los bots que envían automáticamente los correos spam, generalmente, no analizan los formularios sino que se limitan a buscarlos en la web, rellenar todos sus campos y enviarlos. Precisamente, este funcionamiento de los bots es lo que nos permite evitar el envío de spam mediante el uso de CSS y Javascript.

Para ello añadimos un campo oculto y vacío en el formulario de tal manera que los usuarios de la web no lo verán y por tanto no lo rellenarán, pero los bots sí que lo cumplimentarán, ya que rellenan todos los campos del formulario antes de enviarlo.

Para comprobar si el formulario ha sido cumplimentado por un usuario o un bot simplemente debemos validar, mediante Javascritp en el evento onsubmit, si el campo oculto tiene algún valor. Si lo tiene, el formulario lo está intentando enviar un bot y debemos evitarlo haciendo que el evento onsubmit devuelva false.

El código sería el siguiente:

                                
<script>
  function noSpam() {
    if(document.getElementById("antispam").value) {
      // Hay texto en el campo oculto. Lo ha escrito un bot y no enviamos el formulario
      return false;
    }
    else {
      // No hay texto en el campo oculto. Eviamos el formulario
    }
  }
</script>

<form action="enviar.php" onsubmit="return noSpam();" method="post">
  	<label>Email:</label>
  	<input type="email" name="email">

   	<label>Nombre:</label>
  	<input type="text" name="nombre">

	<div style="display: none;">
        <input type="text" id="antispam" name="antispam" />
		<label for="antispam">Si ves este campo déjalo en blanco.</label>

	</div>

	<input type="submit" value="Enviar">
</form>
                                
                            

Espero que este artículo te sea útil para evitar el spam en tus formularios web.