Finding myself in full agreement with a post about how captcha can go to hell, and inspired by the ideas put forth in Lightweight Invisible CAPTCHA Validator Control, I’ve developed an invisible captcha for EE for use on the site I am developing.
It asks a simple math question: the addition of 2 random single digit positive integers. If a user has javascript enabled, the question will answer itself and be hidden from view. SPAM bots are generally known to not be able to parse javascript. The javascript is also slightly obfuscated and randomized, so that if someone wants to write a SPAM bot that uses screen scraping to figure out the correct answer, they’ll have to work for it a bit.
This is pretty much a drop in replacement for the image captcha. Although the image CAPTCHA in EE is better than many of the CAPTCHAs you see today that are impossible to read, they still suffer from being inaccessible and a slight (or large) annoyance to users. Yes indeed, image CAPTCHAs can go straight to hell ![]()
*Remember, good SPAM prevention involves deploying and utilizing a whole set of tools, each of which adds a piece to the puzzle. This is not an end solution that will or possible can stop all SPAM. It is merely one tool among many that you can utilize in combination to combat SPAM.
The extension is attached as a ZIP archive.
Usage
Usage is very similar to the standard CAPTCHA, with a few key exceptions:
1. You must give the CAPTCHA input an ID.
2. You must wrap the CAPTCHA “input block” in a DIV with a ID that is the concatenation of the input ID + “-container”. (don’t get too caught up on that. The example will make it more clear if you didn’t quite catch that.) This allows it to be invisible to users with Javascript enabled.
3. The {captcha} tag outputs the input label (set in the settings) + some javascript.
Here is the example CAPTCHA code from eedocs:
{if captcha}
<p>Please enter the word you see in the image below:</p>
<p>{captcha}<br />
<input type="text" name="captcha" value="" size="20" maxlength="20" style="width:140px;" /></p>
{/if}
With Invisible CAPTCHA, the example would go:
{if captcha}
<div id="captcha-container">
<p>{captcha}</p>
<p><input id="captcha" type="text" name="captcha" value="" size="20" maxlength="2" style="width:140px;" /></p>
</div>
{/if}
Settings
There are only 2 settings, which are pretty straightforward.
1. Captcha input label - This is the label to output. Use the tags {first} and {second} to mark where the numbers should go.
2. ID of the captcha input field - This is the ID on the captcha input field. Defaults to “captcha”
Installation
Standard extension installation. Copy ext.invisible_captcha.php to the extensions directory and lang.invisible_captcha.php to the language directory. Then enable it from the EE admin, edit the settings, and setup (or re-setup) the templates with the forms that use CAPTCHA.
