Fighting Spam with CSS

Fighting Spam with CSS
Digg Topic • Tag topic on On del.icio.us • Technorati Search • Post to Slashdot

You are currently in Programming, Web and Software Design/Development

Thu Jun 28, 2007 4:45 pm	Reply and quote this post

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: http://www.modernbluedesign.com/web-d...css-spam-fighter/

THE FORM:

Here is the xhtml I am using for the form code:

Code:

<form method="post" action="process.php">  

<fieldset>

  <label>Name: </label><input name="name" type="text" /><br />

  <label>Email: </label><input name="email" type="text" /><br />

  <label>Comment: </label><input name="comments" type="text" /> <input name="info" class="special" type="text" /> 

  <input value="Send" type="submit" />  

</fieldset>

</form>

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:

THE STYLES:

Code:

body {

line-height:35px;

font-family:Arial, Helvetica, sans-serif;

color:#333;

font-size:14px;

}

.special {

width:5px;

visibility:hidden;

}

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 SCRIPT:

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.

More Thoughts:

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.

Another interesting article:
For those of you tired of gamma not showing correctly for images in PNG format, this awesome fix (http://www.modernbluedesign.com/web-design-blog/tweak-that-gamma/)is for you.

Contributed by Editorial Team, Executive Management Team
372659 iVirtua Loyalty Points • View Profile • Send Private Message • Back to Top

Related Articles
Fighting Games Fighting Malware Fighting Fantasy games on the way for hand... warrock:Free first person fighting game Bill Clinton: Green buildings key to fighting c... [SPAM] 6 dvd-rom set with with templates spam emails Stock spam scams increasing... ever got one? Wh...

Page 1 of 1