Protecting Your Contact Page

In my last post I explained how to use Javascript to hide your email address on a web page while still displaying it to the public. While some may not mind making their email address public, it may be more information than others would like to disclose. A business needs to route messages from their website to the proper person, but still want to have just one point of contact.

The answer for both is a contact page. It allows site visitors send a message directly from the site.

Since this method does not disclose the recipients email address you would think this would reduce SPAM, and it does, for the most part. But the good people at SPAM Inc. have figured out a way to get their message to you through your contact page. When the SPAM bots scan your page and discover it is a contact page instead of looking for your email address they just fill in the form and then press the submit button. They get what they want, you get what you don't want.

So how do you protect your inbox when using a contact page? Authentication, and there are a variety of ways to do so. Most of them involve the user having to enter some sort of extra information. Which means your potential client has to take an additional step, which can be annoying.

Here's a way to provide a check which verifies that the submit button on your contact page is clicked by a human. It involves using a little CSS that tricks the bots, so the humans will not be bothered.

How does it work?

The average contact page contains input fields for name, email address, subject, and message. Yours may have more, or less, but those are the fields that a SPAM bot is going to be looking for. So when a bot scans your page and finds these fields they fill them in with their message, click submit and move on.

You can use this to your advantage. Lets say this is the HTML for your contact form:

<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
    <div class="row">
        <label for="name">Your name:</label><br />
        <input id="name" class="input" name="name" type="text" value="" size="30" /><br />
    </div>
    <div class="row">
        <label for="email">Your email:</label><br />
        <input id="email" class="input" name="email" type="text" value="" size="30" /><br />
    </div>
    <div class="row">
        <label for="message">Your message:</label><br />
        <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
    </div>
    <input id="submit_button" type="submit" value="Send email" />
</form>  

Below is the same form modified, with changes/additions in red:

<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
  <div class="row">
      <label for="name">Your name:</label><br />
      <input id="name" class="input" name="name" type="text" value="" size="30" /><br />
  </div> 
  <div class="row">
      <label for="email1">Your email:</label><br />
      <input id="email1" class="input" name="email1" type="text" value="" size="30"  /><br />
  </div> 
  <div class="row" id="confirm">
      <label for="email">Confirm Your email:</label><br />
      <input id="email" class="input" name="email" type="text" value="" size="30" /><br />
  </div>  <div class="row">
        <label for="message">Your message:</label><br />
        <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
  </div>
  <input id="submit_button" type="submit" value="Send email" />
</form>  

Then add the following line in your CSS file:

#confirm {display: none;}

When a human uses the contact form they will see and fill in the field with the id "email1". The bots will go straight for the field with the id "email". It then becomes a simple matter of testing for data being entered in the field with the name "email".

If there is data present in that field, you can assume the form was filled in by a bot and it can be discarded. If it's blank, you can assume it came from a human and process the message.

Something to consider when using this method:
 
You don't have to use the field named email. You can use any field you like.

In this example, it would have been just as easy to use the message field. The only important thing is to hide the display of the field you plan on testing from anyone that views the page. This is important because a bot is not viewing a page it is reading the code of the page. All it knows is that it sees a field and that field should be filled in.

I use the field names "email" and "email1" with the hope that whoever wrote the bot was a decent programmer. If so their bot would recognize the 2 fields and deduce that one field is a confirmation for the other. Which would guarantee both will get filled in. It may not be necessary, but I can tell you that I don't get any SPAM from the contact pages that are directed to my email address.

Use whatever you are comfortable PHP/Javascript/JQuery to test the form. A quick test will allow you to verify whether or not the input came from a human.