Yet another anti spam bot protection technique for HTML forms
Anti spam bot protection evolves through time but so does the bot logic. Aftermath is that for real people it's more difficult to submit a contact form, comment or request with all those blurry captchas and mixed-up questions. Here's another approach that stays transparent to the visitor, but tends to do pretty good job.
Form fields visible to bots only
The main idea is to create a few form fields in your contact, login or whatever form, that are visible only to the bot filling. Because bot fill in most of if not all form fields then bot detections comes to checking if this fields is not empty. There are several techniques for doing this. We'll cover three of them here.
Hidden input
This is the easiest one - just add a hidden input in the form and name it with some common name. For example let's have a comment form with only name and comment. Then we add hidden input named "email":
<form method="post" action="">
<input type="hidden" name="email" />
Name: <input type="text" name="name" />
<br />
Comment: <textarea name="comment"></textarea>
<br />
<input type="submit" name="button" value="Add" />
<br />
</form>
Because most of the email fields are mandatory, bots are very likely to fill in ours too. Then the verification of bot activity in PHP will look something like:
function detect_bot($post_data) {
$is_a_bot = false;
if (isset($post_data['email']) && !empty($post_data['email'])) {
$is_a_bot = true;
}
return $is_a_bot;
}
if ($_POST && detect_bot($_POST)) {
echo "You are not human";
} elseif ($_POST) {
echo "Valid submission";
}
You can check the results here. Use Web developer plugin for Firefox, click on Tools -> Web developer -> Forms -> Display form details to see the hidden field and fill in some dummy data there.
Text inputs with CSS stealth mode
There's one issue with the above approach and it is that the hidden field is actually marked as hidden in the HTML. This make detection very easy. To overcome this, use CSS to cover this:
<style type="text/css">
.email_field {
display: none;
}
</style>
<form method="post" action="">
<input type="text" name="email" class="email_field" tabindex="-1" />
Name: <input type="text" name="name" />
<br />
Comment: <textarea name="comment"></textarea>
<br />
<input type="submit" name="button" value="Add" />
<br />
</form>
Note that we use negative tab index to prevent accidental tab stop from a real user.
Covering block element
Another way of achieving this is to cover the desired element with another element. In this case your fake input cannot be differentiated by the others even based on its class property. Here's an example code:
<style type="text/css">
.email_cover {
display: block;
position: absolute;
width: 500px;
height: 30px;
left: -200px;
border: 1px solid #000;
background-color: #fff;
}
.clear {
clear: both;
}
</style>
<form method="post" action="">
<div class="email_cover"></div>
<input type="text" name="email" tabindex="-1" />
<div class="clear"></div>
<br />
Name: <input type="text" name="name" />
<br />
Comment: <textarea name="comment"></textarea>
<br />
<input type="submit" name="button" value="Add" />
<br />
</form>
Conclusion
You can check all three approaches here. Note that those are very likely to stop bulk page crawlers, but can be easily evaded by custom script, written just for them. So if you have high profile website you'd want to have some additional prevention from automatic submission.
Comments:
Reuben Chovuchovu (02-12-2011 16:58) :
on the "Covering block element" method, what is the use of the clear DIV and why are we 'clearing' it whne there are no floated elements before it?
I am a novice web designer still learning the ropes.
my email: #EMAIL_HIDDEN#
This page was last modified on 2024-04-18 19:34:24