Crea un captcha invisible con jQuery
Somos muchos los que pensamos que aunque necesarios, los captchas suelen ser bastante poco atractivos y estropean un poco el diseño de nuestra web. Vamos a explicarte cómo puedes crear tu propio captcha invisible con jQuery, simplificando el proceso de rellenado de formularios para los usuarios.
La idea es invertir el funcionamiento que tienen los captchas convencionales, es decir, en vez de rellenar un campo con los caracteres indicados para verificar que somos humanos, crearemos un campo que solo vas a rellenar si eres un bot.
Realmente lo que vamos a hacer consiste insertar un input en el formulario HTML que esconderemos con CSS para que los usuarios no lo vean (por lo tanto no lo rellenarán). En cambio, un bot sí va a ver el campo oculto y lo va a rellenar.
Lo que hagamos en caso de que el captcha invisible sea rellenado, depende solamente de nosotros. Vamos a tener el todo el control sobre las acciones a realizar en dicho caso.
Qué necesitamos
Vamos a necesitar un fichero Javascript con las funciones para el control del formulario, un fichero CSS para ocultar el captcha invisible y el fichero con el código HTML del formulario.
El HTML
Código del formulario. En nuestro caso usamos Bootstrap, por lo que verás varias clases CSS relacionadas. Lo importante es la clase “oculto” del input que hace de captcha y su identificador:
<form id="form-captcha">
<h2>Formulario</h2>
<div class="form-group">
<label for="campo1">Campo 1</label>
<input type="text" class="form-control" id="campo1">
</div>
<div class="form-group">
<label for="campo2">Campo 2</label>
<input type="text" class="form-control" id="campo2" >
</div>
<div class="form-group oculto">
<label for="captcha-invisible">Introduce texto si eres un bot</label>
<input type="text" class="form-control" id="captcha-invisible" >
</div>
<button id="btn-enviar" type="submit" class="btn btn-primary">Enviar</button>
</form>
El CSS
Aquí daremos estilo a nuestro formulario, pero lo que nos interesa en este ejemplo es simplemente esconder el captcha para que realmente sea invisible:
.oculto {display: none}
jQuery
Esta es la parte interesante. Vamos a definir el comportamiento del formulario en caso de que un bot rellene el input invisible. Podemos hacer lo que queramos. Por ejemplo, podríamos controlar por PHP que, una vez enviado el formulario, si el campo invisible no está vacío no se envíe correo alguno, o no se introducirá la información en la base de datos.
En nuestro ejemplo (el que verás en la demo) vamos a desactivar el botón de enviar para que el bot no pueda interaccionar con él. Lo haremos del la siguiente manera:
// Captcha invisible
jQuery("#captcha-invisible").change(function (){
if (jQuery(this).length > 0){
//qué hacemos si un bot rellena el campo
jQuery("#btn-enviar").prop( "disabled", true );
}
});
Para que puedas comprobar todo lo que te hemos explicado, hemos preparado una demo de un formulario con captcha invisible, donde podrás mostrar y ocultar el campo invisible y testear su funcionamiento.
Si no eres desarrollador y quieres implementar esta funcionalidad en tus formularios, ponte en contacto con nosotros y te daremos el soporte que necesitas.
En caso de que ya tengas un captcha invisible en tus formularios, puedes dejar un comentario explicando de qué original manera combates a los bots.
Ver demo
