php: a simple way to fight SPAM on your contact form
Contact forms are a vital part of a business’ website. Your content is useless if you do not have a way for potential customers to contact you. ‘Back in the day’, it was a generally accepted practice to simply put your email address(es) on the site. However, spammers quickly found an easy target for their junk emails.
Enter the ‘Contact Form’.
Contact forms provided a means by which customers could send you a message without knowing your email address. These forms also keep people on your site, instead of sending them away to write a message in their preferred email program (or site). Sadly, spammers have now found a way to send a message through these contact forms. Many forms have simple data validation, which requires that you fill out specific fields with specific information (phone number, email address, etc). Other forms use CAPTCHA tests, which provide an image of text that the visitor must re-type into a field on the form. While this works well for responses on blog sites or registering for an online community, we don’t feel that it is appropriate for the average business website.
So, after some thought, we decided to try some ‘negative validation’. Instead of having more required fields, we created a field that must be empty, then we used simple CSS to hide that field from human visitors. Because the spam bots have learned to fill out every single field on a contact form, they will see this field in the code and put something in it and our form will know to simply reject this message.
Enough talk, lets get to the example…
This code can be added to nearly any php-based contact form.
First, we are going to add a new field to the form itself. It doesn’t matter where this field is located, as long as it is inside the <form> tags. We originally tried using an arbitrary name for this field, but it did not fool all of the spambots. We decided to rename our real email field and use “Email” for this input. At the time of this writing, it has worked for us.
Code:
<div class="email"><input type="text" name="Email" id="Email" value="" size="20" /></div>
(If you already have a class named “.email”, please rename class=”email” as you see fit)
At first, this simple field will be visible because you will want to test it before hiding it.
Next, we need to look at the form action value. This will tell us where the form submits to. Our contact forms submit to themselves (contact.php submits to contact.php) and all of the server-side code used to send the email is at the top of the code (above the <html> tag).
Once we have located the code that actually sends the message, we need to put it inside a simple if-statement around the code that specifically executes sending the e-mail. Every contact form is different, so we must assume that you know how your specific form works.
Code:
<?php if ($_POST['Email'] == '') {
Put your 'send the message' code here;
} ?>
We decided to take it a step further. Instead of simply not allowing the ’send the message’ code to be executed, we decided to send the spambots away from our site.
Code:
<?php if ($_POST['Email'] == '') {
Put your 'send the message' code here;
} else { header( 'Location: http://www.google.com/' ); } ?>
In this example, we just sent them to Google, but you are free to send them wherever you like.
Now that we have added the new field and conditional region, we can go ahead and load the contact page in the browser. Fill out the form however you like and make sure to type something (anything) into that new field. Submit the form and you should be instantly re-directed to Google.
Lastly, we need to return to the new field. To make sure that it is not visible to humans, we need to apply a little bit of CSS. Originally, we used “display:none;”, but learned that the spambots already knew this trick, so we had to resort to some different code. Unfortunately, the time may come where the spambots learn this trick, but for the time being, it works just fine.
Open your stylesheet and add this line:
Code:
.email {position:absolute;margin-left:-5000px;}
After saving the stylesheet, reload your form, and you will see that the field is hidden. Submit your contact form and you should get an email, just like before.
Compatibility:
This method should apply to virtually any php contact form. If you find a compatibility issue, we would love to hear it!
That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!
March 26th, 2008 at 2:05 pm
I added this fix to my sites contact page. Hopefully it will eliminate my spam problem.
Great article!
March 26th, 2008 at 10:15 pm
What about tab order?
If you are going to use this technique, you probably want to put this field at the very end of the form. Given the input field is not actually hidden, but is moved out of view, it is still a rendered object and would be part of the tab sequence as you move through your form. May not be a big deal to most, but certainly could be confusing or even troublesome to the well intentioned site visitor with special browser settings (such as the visually impaired).
March 27th, 2008 at 8:08 pm
That’s an excellent point, thanks for bringing it up. We might suggest that instead of placing the input field at the end of the form, it may be best to place it at the beginning, just before the first true input field. That way, when the visitor selects the first input field, they will have no “double-tabbing” while they proceed through the form, and they won’t have to double-tab when moving from the input fields to the submission button. Again, thanks for the feedback!