The Solution
Many technologies have been implemented to curb the amount of spam that comes through via contact forms. Perhaps the most popular technology is the CAPTCHA. The major problem with this solution is, although they are good at keeping most robots out, they can be equally difficult for your visitors to use:
Is this very usable?
Can you read that CAPTCHA? If this is the solution to curbing contact form spam, a lot of site visitors are going to be left in the dark. If you're like us, this is a totally unacceptable solution. However, we think we have found a much better alternative.
Using JavaScript™ And CSS To Obfuscate The Form
As we mentioned in "
The Problem", creating a robot that crawls websites looking for <textarea> tags is a very trivial task. What isn't so trivial, however, is creating a robot that supports JavaScript™ and/or CSS. We can leverage this weakness to make our contact forms much more difficult for the spammer to use.
Using our previous example, we can see what our form looks like to a robot:
Using a little CSS and JavaScript™, we can modify this form to do two things:
- Make the original <textarea> field invisible to your visitors.
- Use JavaScript to create the "real" <textarea> field which most robots cannot execute.
Now our form HTML would look something like this:
By setting the display style of the original <textarea> to "none", we've effectively made it invisible to your site visitors who are visiting in their browser. Right after the original (now invisible) <textarea>, we've included a bit of JavaScript that calls a function named "writeArea". This function will write the "real" <textarea> to the page. Since most robots don't understand CSS and JavaScript, the robot won't see the "new" <textarea>.
The "writeArea" function would look something like the example below. Notice that we go a step further and obfuscate the text that the script is writing to the page. This ensures that any robot that is searching for the text "<textarea>" won't find it in this function.
<script language="JavaScript" type="text/javascript">
function writeArea()
{
var tmArray = new Array();
tmArray[0] = "<tex";
tmArray[1] = "tarea nam";
tmArray[2] = "e='realmess";
tmArray[3] = "age' rows=";
tmArray[4] = "'10' cols=";
tmArray[5] = "'40'></te";
tmArray[6] = "xtarea>";
for (i = 0; i < tmArray.length; i++)
{
document.write(tmArray[i])
}
}
</script>
Note! Ensure you place the script above before your form in the page HTML! It is preferrable to place this script block in the "<head>" section of your page.
This script simply combines all the elements in the array to dynamically write the new <textarea> field to the page. The output of this function would look like this:
<textarea name='realmessage' rows='10' cols='40'></textarea>
Using this method, you can now make some assumptions in your form handler logic that states that if a form posting comes in with a value in the "message" field (the invisible <textarea>), it can be safely assumed that it cam from a robot and is probably spam. Remember, browsers won't see the "message" field so any posts with a "message" value must not be a browser.
Voila! You now have a unique spam filter on your contact form that didn't place any large obstacles in front of your visitors. With a little tweaking of the JavaScript™, you can make your "writeArea()" function unique so that robots don't see a pattern and exploit it. You could also rename the "writeArea()" function to something totall different, say "goAwaySpammers()". The possibilities are endless.
What About Visitors That Don't Support JavaScript™?
Practically every modern browser supports JavaScript™, even the ones on cellular phones. However, there are a few browsers - particularly FireFox - that make it easy for the user to turn off JavaScript™. In this case it's true that those visitors will not see the "real" <textarea> and will not be able to use the contact form. However they also won't see the original <textarea> either, so their contact form page would appear incomplete.
To get around this issue, we suggest that you perform a test to see if their browser has JavaScript™ support enabled. If they don't, offer them a message that tells them that they must enable it to use this form. Compared to the option of using a CAPTCA (like the one displayed at the top of this page), this is a very small hurdle for them to jump.
