Friday, May 16, 2014

Easiest Way to Handle Spammers on Contact or Comment Forms

What is the easiest way to prevent spam in contact or comment forms on a website?


I have a contact form on one of my websites www.lutz-engr.com and was getting some actual people filling out the form for legitimate reasons, but the vast majority of the content was spam from countries such as Russia and from IP addresses reported from many other countries.  See my original post on "How to Handle Spammers".  Sometimes the forms are filled out in groups and I suspect there is either a system that can disguise its IP address or there is a network of spam controllers running on different computers.  Either way I always found that the spammed forms had one thing in common...

Spammers do not run javascript.


At least my spammers weren't using javascript.  So now I could turn this observation into an advantage and simply require users to be running javascript in order to submit a form on the website.  That's not too big a deal - I don't know any typical users that browse the web with javascript disabled.  Have you tried it?  It sucks!


This is what my form looks like in HTML.  Note I am using the PUT HTML verb here instead of the typical POST or GET.  The reason I use PUT is that my PHP page will not respond to the PUT method, so unless it is changed by the javascript to POST, activating the form won't be handled by the webserver.

<form action="" method="PUT" name="contact_form">
    Your Name: &nbsp;</div>
    <input type="text" name="name_field" size="35">*<br>
    Phone: &nbsp;</div>
    <input type="text" name="phone_field" size="35"><br>
    Email: &nbsp;</div>
    <input type="email" name="email_field" size="35">*<br>
    <input type="hidden" value="nojs (unused)" name="timedayjs" 
        id="timedayjs">
    <input type="submit" value="Submit" name="comment_submit_button" 
        id="comment_submit_button" disabled="disabled">
</form>

Change your form so that it is initially disabled in HTML

  • Form Method - Set to method="PUT" to disable, but changed to "POST" for javascript users
  • Form Action - Set to action="" to completely disable the form and when run, javascript puts the correct location here
  • Form Field 'timedayjs' - This is just a form field I used to capture if the user had run the javascript on the page.  It really could be named anything, but I choose this name to  throw anyone off who actually did take the time to look at the HTML code.
  • Submit Button - This I set to disabled="disabled" so a regular user that had javscript disabled would notice they couldn't click on the form.  Of course a spammer could just ignore this directive, but without the correct form method and form action the results still won't get sent to the server.

Enable your form using javascript


Below is the javascript code I use that requires the user to have javascript running which enables the form and to fixes the four configuration items that are disabled in the HTML code.  I am using jQuery so the functions go in the $(document).ready function to be executed after the page is ready.  If you don't use jQuery you could put the functions in a javascript setupForm() function and execute in on the name_field using something like onchange="setupForm()".

<script type="text/javascript">
    $(document).ready (function() {
      $('#timedayjs').val('set by js');
      document.contact_form.method = 'post';
      document.contact_form.action = 'index.php';
      document.getElementById('comment_submit_button').disabled=false;
    });
</script>


All of these actions has resulted in a drastic reduction of spamming through our contact us forms on the website.  Please try this code on your site.  Leave a note or +1 if you feel this was helpful.