Implementing Captcha With A Challenge Or CSS
January 21st, 2008 by Henry AddoOne of the huge challenges facing online forms is automated script filling it up, then submitting it. A way spammers use to high jack a website then posting unsolicited content.
A smart way of fighting these automated scripts is to implement CAPTCHA on your forms that way you can detect humans from scripts.
Implementing CAPCHTA on your forms can be a little bit complex especially when you use the distorted image approach like this one.
.
This type of CAPTCHA is not only complex to implement but actually, technologies have been developed that reads these type of CAPTCHA thus making it ineffective to use.
A better, easy and effective way of implementing a CAPTCHA is to ask a very basic random question on the form. Could be a math challenge or just any quiz you think almost every human on this earth can answer. With that said, I implemented a script that does that. Feel free to download it. Got this concept from Drupal’s captcha module. That is what they actually use and is effective.
Another quick, better, smarter, easy and effective way of implementing that same feature( CAPTHCA ) is to use CSS. How?. You design a form with all the necessary fields you need from the user. Add another field to determine if its human or automated scripts that is filling the form. Use CSS to hide that particular field from humans. If its humans that is filling up the form, he/she will not fill that field because its not visible. So when validating, check if that field has been filled up. If it has, then it is surely a script that filled up the form so you don’t process otherwise its human. Go ahead and process the form. Check codes below to see how you can achieve the hiding of the form field with CSS.
1 <html>
2 <head>
3 <title>Captcha With CSS</title>
4 <style type="text/css">
5 .captcha {
6 display : none;
7 background: #FFF;
8 }
9
10 #content {
11 width : 300px;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="content">
17 <input type="text" size="30" name="first_name" />
18 <input type="text" size="30" name="last_name" />
19 <input type="text" name="captcha" class="captcha" />
20 <input type="submit" name="send" value="Send" />
21 </div>
22 </body>
23 </html>
24
captcha challenge css forms quiz spam spammerscaptcha challenge css forms quiz spam spammers
January 21st, 2008 at 7:08 am
great post there.
thank you for the tips.
but i need to ask, have you really tried your CSS technique? cause as far as i know screen readers and boots are smart enough now being able to tell if something has display none to ignore it.
Cheers