Archive for the 'jQuery' Category

Create a Spam-free contact form without a captcha

Wednesday, March 9th, 2011

Captchas are annoying and only exist to combat spam. I’ve been using a technique for the past year that doesn’t require a captcha and I haven’t received a single piece of spam email.

Here’s how:

  1. Create a form and set the form action to # (we dont want spam bots to know where the form is being submitted to).
  2. dont use a submit button, instead use an <a href=”#” class=”submit”>Submit</a>
  3. Use jquery to trigger the post when the ‘.submit’ link is clicked.

Here’s the jQuery code I use to do the form post:

 

$('.submit').click(function(){
	  // get the text that the user put into the form
	  var name = $('input#contact-name').val();
	  var email = $('input#contact-email').val();
	  var message = $('textarea#contact-message').val();
          // prepare it for an ajax post
          var dataString = 'name='+ name + '&email=' + email + '&message=' + message;  

          // post the form to the page that hosts your email script
	       $.ajax({
	       type: "POST",
	       url: "/a/contact/",
	       data: dataString,
	       success: function() {
	         $('.contactform form').fadeOut();
	         $('.contactform form').html("<h3>Thanks for reaching out!</h3>")
	         .fadeIn(function() {
	            $('#formage');
	          });
	            }
	          });
	        return false;

	});