The other day I received a phone call from my mum. She was trying to help my aunt to set up an account on Gmail. My mum knows a little something about the internet and how things work so I was pretty sure they would figure it all out by themselves. Turns out they didn’t. After trying for hours (no joking..) I got this desperate call from my mum in which she claimed that “they” (I guess she meant the google-people) was erasing her password and every time she tried to do it again they made it harder.
It figures she was stuck on the word verification were Gmail uses a so called captcha-image. My mum and my aunt are by no way disabled people but even so I tried to make them click on the “wheelchair”-symbol to hear the letters. That didn’t work. My aunt didn’t have any speakers connected. *sigh*
Story ended with me having to create that account for my aunt cause they simply couldn’t get the captcha-image right.
In this article I would just like to present a simple way of getting rid of spam without using captcha. And thus help people like my mum and aunt getting cranky over some weird incomprehensible image. I acknowledge that this is not a good solution for big web apps like Gmail (sorry mum) but for a small site it could be an alternative.
Let me start by pointing out that this is not a new solution. It’s been around for a while but I just felt that not so many people know about it. I have tested this on the form on my own web site and so far I never had a single spam in my inbox.
So what’s the trick?
Most spam-robots fill in every single input-field in a form. The trick here is to have an input-field that should be left empty to validate. That input-field is hidden with css so “ordinary people” with css enabled doesn’t even see the empty field.
Let me put it into code:
<label for="test" class="hide">Don't write anything here! </label> <input name="spamtest" id="test" type="text" class="hide" />
As you see in the code I put a label on the input that I’m going to hide. This is to be nice to people with css disabled.
After putting up this code you simply hide the input-field and the label with css by using whatever method that suits you. Here’s an example on how to do it. See the class hide in the code above? Use that one!
.hide{
position:absolute;
left:-9999px;
}
The validating of this is quite simple. An simple if-statement will do the thing. In php it could be something like this:
if($_POST['spamtest']=='')
{
//Go ahead and submit form
//(after validating the other input-fields of course!)
}
That’s it. Please try it out yourself and feel free to comment on this. I would also love to hear other solutions to avoid using captcha in a form.
/Ida
Comments