A captcha alternative for preventing spam on forms, while maintaining an easy interface for humans.
NOTE This is a demo for the slider compontent. By its self, it doesn't prevent spam because bots can submit forms on their own. This needs extended so that there's a check to see if the form was submitted using the dragged element, or by another method. There may be ADA issues at that point if that sort of thing is a concern for your project.
Simply slide the element to the right to submit the form, similar to unlocking an iOS device. (Slide via a mouse drag, or touch!) If a user mistakenly clicks instead, the sliding element will do a little animation to help suggest what to do.
Slide To Submit requires jQuery. Add the plugin after jQuery, and initialize it. You may also call options here.
<script src="https://github.com/kthornbloom/slide-to-submit/raw/master/js/jquery.js"></script>
<script src="https://github.com/kthornbloom/slide-to-submit/raw/master/js/slide-to-submit.js"></script>
<script>
$('.slide-submit').slideToSubmit({
errorText: 'Check required fields', // Shown if fields are invalid & browser doesn't have built-in tooltips
successText: 'Sent!', // Shown before submitting
submitDelay: 500, // Delay for showing successText
graceZone: 100 // Pixels from the right that is accepted as a full side
});
</script>Add the CSS to the header, or include with your other styles:
<link rel="stylesheet" href="https://github.com/kthornbloom/slide-to-submit/blob/master/css/slide-to-submit.css">Add the slide-submit element at the end of your form:
<form>
<div class="slide-submit">
<div class="slide-submit-text">Slide To Submit</div>
<div class="slide-submit-thumb">»</div>
</div>
</form>0.1.1 - Added support for HTML5 form validation
0.1.0 - Launch