Tuesday, July 31, 2007

[itsdifferent] "HTML Form Filler spam" with CSS

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. thus forced to find a solution that was light-weight, easy to implement, and most importantly was effective.

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.

Here is the xhtml for the form code:


<form method="post" action="process.php"> 
  <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" /> 

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 didn't put a break between the comments box and the spam box. Just put it at the end of the line. Real people won't see it looking at the page, because turned off the visibility in CSS.



body {
font-family:Arial, Helvetica, sans-serif;
.special {

Really, the only class you need to look into is called "special". Basically, made it really small, again to avoid any design conflicts, and then 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.


$process = $_POST['process'];
$spam = $_POST['info'];
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];

if ($process == "yes") {
if ($spam != "") {
echo "Stupid Spammer";
} else {
echo "No Spam. Process Script.";
// put the info here to send the email or whatever
} else { echo "What do you think you are doing?"; }

More Thoughts:
After doing this, 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 realize once more how important CSS is to making things work right. So in this case, CSS is weapon of choice.

Kind Regards,
Harshul Shah.

Need a vacation? Get great deals to amazing places on Yahoo! Travel.

Note: This Group is not a Job Searching Group, so please co-operate and dont transfer any kind of job related material across this Group.AnyOne doing so can be banned from the Group
Thanx , Group Co-Ordinators
Ads on Yahoo!

Learn more now.

Reach customers

searching for you.

Yahoo! Mail

You're invited!

Try the all-new

Yahoo! Mail Beta

Real Food Group

Share recipes

and favorite meals

w/ Real Food lovers.