Form Spam is something almost every website owner encounters. The most popular form of protecting your website from form spam is by using a visual image that contain text in a strange font and is usually difficult to read (CAPTCHA) so that OCR algorithms by form spam attacks cannot decipher the images.
The problem with this solution is that many users find them difficult to use.
Another Approach
Distorted text can hinder the user's experience and it can prevent users from posting a comment or completing a form. Many people have difficulty understanding the characters and retyping blurred words can become frustrating.
An innovative idea is to use CSS to create a solution that seems like a Captcha by using an image without the <IMG> tag. Instead, it uses the background image property in the CSS file. It is not impossible, but unlikely for robots to scan the HTML file, find the CSS file, compare CSS selectors, find a CSS definition, locate the image and read it using OCR algorithm. The advantage is that you can design your image anyway you want without using complicated code. Keep the exercise simple; the idea is not to frustrate the user but to stop the spam bots from successfully submitting your form. A simple ‘1 2 3 A 5 6’ image where you ask ‘write the letter you see above’ would be quick and easy enough.
Before you go ahead and implement this on your website, there are a few things to consider…
This solution works best for lower traffic websites. Tools can be developed to connect all the dots and decode the image, which would be more probable for a high profile website.
This trick only works with CSS enabled browsers, and it is not very accessibility friendly, as it would leave out users that need built-in voice for browsing. Think audience first.
Another solution is to create an extra form field and set it to display:none. A spam bot always finds the hidden field and fills it in. On the back end, the script would not authenticate or process the form if the field is filled out.
Here’s a sample code.
HTML CODE
*Anti Spam. Please fill out the following:
**Notice the field name is generic enough that spam bots won’t recognize it as something obvious such as ‘name’ or ‘display:none. The field is mandatory. Javascript is used to validate the entry”
CSS code
label.question{
display:block;
background:url(../images/question.gif) no-repeat 0 0;
height:36px;
line-height:12px;
**Notice the CSS selector is also generic enough that spam bots won’t recognize it as something obvious such as ‘CAPTCHA or ‘hidden field”
<script type="text/javascript">
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateEmail(theForm.email);
reason += validatePhone(theForm.phone);
reason += validateEmpty(theForm.realname);
reason += validateAntispam(theForm.antispam);
if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}
return true;
}
function validateAntispam(fld) {
var error="";
var str = "red";
if (fld.value.length == 0) {
fld.style.background = '#baaca2';
error = "You did not answer the AntiSpam Question Correctly.\n";
}
else if (fld.value.toLowerCase() != "red") {
error = "You did not answer the AntiSpam Question Correctly.\n";
fld.style.background = '#baaca2';
} else {
fld.style.background = 'White';
}
return error;
}
</script>
I'm sure there are other methods. This one just seemed to be easy to implement, and works.
