Creating a contact form on your business website can be a great thing. It can help you generate leads and answer questions from current clients, but it can also generate quite a bit of spam. Preventing spam may even seem like a full time job; as a small business owner you don’t have time for it. There are lots of ways to help prevent spam (including the honey pot technique, which we previously covered). They all seem to cut down on the spam, but do any of them stop the spam for good? As a web developer, the best approach is to use multiple techniques.
WARNING: Technical details ahead! You might want to pass this blog post on to your web developer.
One way spam gets past lead generation forms is by bypassing JavaScript validation. To avoid this, we can use Modernizr to detect whether JavaScript is enabled so we can determine how to process the form. Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It appends classes to the <html> tag so you can use CSS or JavaScript to enhance the user’s experience. Using jQuery, we can detect ifthe <html> tag has a class of ‘js’ and attribute the form action. If JavaScript is disabled, thenthe <html> tag will not have the ‘js’ class and the form action will be blank. The form will not submit, which will stop the spam.
In the example below, we will be using jQuery. Load the jQuery library in the <html> tag above all other script references. You can pull it from the Google CDN or save it locally.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Next, download Modernizr and add the script in the <html>Â tag below the jQuery reference.
<script src="/js/modernizr.js"></script>One of the features that Modernizr detects is JavaScript. If JavaScript is enabled, then the library adds a class to the <html> tag of ‘js’ that we can exploit. You can see in the image that it’s the first class it appends. You won’t be able to see these appended classes in the source code of the page, so you’ll need to use F12 Developer Tools (for Internet Explorer), Firebug (for Firefox) or Developer Tools (for Chrome).
Next up is another script we add to the <head> tag after the Modernizr script. Its job is to check if the <html> tag has a class of ‘js’ and assign it to a variable. If this variable exists or is true, then two things happen. First, we assign the form action URL to a variable. Second, we attribute the variable to the form action.
<script>
$(document).ready(function(){
   var useJS = $('html').hasClass('js');
   if (useJS){
       var formurl = 'http://www.formaction.com';
       $("form#contact").attr("action", formurl);
   }
});
</script>The HTML form action will be blank. Always include a noscript tag just in case. Below is an image of the rendered code with JavaScript turned off.
Putting it all together.
<!DOCTYPE HTML>
<html>
<head>
<!--You can use jQuery or plain JavaScript to add the form action.-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--The Modernizr script goes in the head of your HTML. -->
<script src="/js/modernizr.js"></script>
<script>
$(document).ready(function(){
   var useJS = $('html').hasClass('js');
   if (useJS){
       var formurl = 'http://www.formaction.com';
       $("form#contact").attr("action", formurl);
   }
});
</script>
</head>
<body>
<!--The form action is blank-->
<form action="" method="post" id="contact">
<input type="text" name="firstName" value="First Name" />
<input type="text" name="LastName" value="Last Name" />
<input type="submit" name="submit" value="Send" />
</form>
<noscript>
<p><strong>To submit the form, JavaScript must be enabled.</strong></p>
</noscript>
</body>
</html> By taking the form action out of the HTML we can prevent the spam that bypasses JavaScript. Continue to use other tips and tricks like the honey pot technique and jQuery form validation. Good luck!
