It can be very frustrating when you have a form on your site which has a good and useful purpose, but almost becomes obsolete because of relentless spamming. I had this problem a few months ago with my old site, and was thus forced to find a solution that was light-weight, easy to implement, and most importantly was effective. I decided to turn toward my friend CSS to help me out.
The idea here is setting up a form with a text field and via CSS making it invisible. Then, if a post is sent to a php script handling the request and that text box has information in it, that means a human didn’t fill it out, and the script is simply aborted.
Here is a simple example. You can view the actual page here.
Here is the xhtml I am using for the form code:
<form action="process.php" method="post"> <fieldset>
<input name="name" type="text" />
<input name="email" type="text" />
<input name="comments" type="text" /> <input class="special" name="info" type="text" /> <input type="submit" value="Send" /> </fieldset>
First, this is not a tutorial on making forms look nice, so don’t give me crap. Everything should be straightforward, however, you will notice after the comment text box, there is another text box with the name “info” and the class “special”. This is the spam fighter. I didn’t want to mess up the orientation of the form, so I didn’t put a break between the comments box and the spam box. I just put it at the end of the line. Real people won’t see it looking at the page, because I turned off the visibility in CSS:
font-family:Arial, Helvetica, sans-serif;
Really, the only class you need to look into is called “special”. Basically, I made it really small, again to avoid any design conflicts, and then I assigned the visibility property with the value “hidden”. This way, browsers don’t make it visible, and thus people can’t fill it in. However, when a spam scraper comes through the site, it’s going to read it and think it should be filled in — only to their surprise.
The php to handle this is very straightforward. Basically, you just look to see if that field has been filled in before it was posted, and if it was, you simply break the script so no email is sent, and tell the spammer to get lost. If it’s not filled in, then business as usual. To see this in action, fill out the top form and press “submit”. Then, fill out the bottom form including the spam box and press submit. Process.php returns different results based on what is typed in.
After doing this, my spam levels from form submission went down to zero. You could always add a function to search for html in the post as an extra caution as well. It just made me realize once more how important CSS is to making things work right. So in this case, CSS is my weapon of choice. I recently implemented this on my Orlando Florida Used Cars and Utah used cars website. It’s also working great for Doug Bennett Magic and Consumer Credit Repair Agency.
Another interesting article:
For those of you tired of gamma not showing correctly for images in PNG format, this awesome fix is for you.