Image verification - captcha
From Online Business Wiki
Contents |
Introduction - What is CAPTCHA?
CAPTCHA (an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart," also sometimes spelled in lowercase), is an image of letters that is dynamically generated and placed on a webform so that the person filling out the webform needs to enter the matching letters to verify that they a real human and not a spambot.
Spambots are robots that automatically submit webforms they find on the web with fake responses, fake identities and generally unsolicited content. These responses will fill your online business customer database with spam. To prevent this, you should use CAPTCHA on your webforms to ensure that a person and not a spambot is filling out the webforms because spambots have difficulty reading CAPTCHA images.
When this feature is enabled for a web form, customers must enter a series of letters generated as an image into a textbox. If the text entered correctly matches what is shown in the image then the web form submission is accepted. An example is shown below as part of a contact form - as well as submitting their name, email address and enquiry, the person needs to fill out the "Enter Word Verification in box below" field with text that matches the image.
Adding image verification to the web form
To add an image verification to the web form, you need to login to Admin and go to Modules -> Web Forms and open your Webform using the Web Form Builder.
Now go to the 'Miscellaneous' tab in the 'Add New Items' box and click the 'Image Verification' button to add a CAPTCHA field to your webform. If you want to remove the CAPTCHA field from your webform you can just click on the delete button on the top right hand corner of the CAPTCHA field in your Webform preview box on the right.
You will then need to save the web form and reinsert it into the page or template on your site that the form is supposed to be displayed on. You can either choose to re-insert the form as HTML or as a module tag - both methods are shown below.
Adding your form with CAPTCHA to a Webpage
Now that the CAPTCHA field is on your webform you'll need to re-insert the form onto your page using one of the following 3 options:
Adding the form using the '1-click insert'
If you don't want to customize the look and feel of your form and you want the simplest option to re-insert the form just click 'Add Form to a Webpage' to open a module-insert box. Tick the 'Automatically the web form on the web page' option then choose the page you want to place the form on and the system will replace your form for you. The system will automatically replace the old form HTML code with the updated form HTML code.
Adding the form as HTML to your webpage
For more advanced users who want full control over the look and feel of their forms then you will need to grab the form HTML and customize this yourself in an editor before pasting back onto your site. Click on the 'Get Web Form HTML Code' button in the action box to open the Webform HTML dialog box. Copy and Paste from the text box to make your own customizations but be careful not to modify the field names, javascript validation code and form meta data.
Adding the form as a module to your webpage
If you are editing a webpage and you have a module manager open on the right you will be able to add the webform as a module. Select the 'Web Form' option in the module manager then select the form you want to insert as a module from the drop down. Tick the insert as module button and click 'Insert'. This will insert the whole form as a module tag in the form {module_webform, [webform_ID]} with your Captcha field inside.
Changing the Backgrond Colour, Text colour and Width of the CAPTCHA image
If you've added the form with the CAPTCHA field in it to your webpage as HTML, you can specify the width for the new captcha in the module parameters like this (with no spaces):
{module_captchav2,[named background color],[named text color],[width in pixels]}
- Named Background color (optional) - the named color to put behind the text, defaults to 'DimGray'
- Named TextColor (optional) - the named color to make the letters, defaults to 'White'
- Width (optional) - specifying the width in pixels will change both the size of the Captcha image and input textbox for the user to enter the letters. Defaults to 160px wide - must be set to be between 150px and 220px wide.
For example if you add {module_captchav2,LightBlue,Indigo,220} this is what is rendered:
All captchas are 6 randomly generated characters based on a special set that has been defined to create minimal confusion
Upgrading From Captcha V1 to Captcha V2
As at July 2009, a new version (V2) of the CAPTCHA module was released to improve its security by changing the validation from client side to server side. If you inserted a web form onto your site prior to July 2009 as a module '{module_webform,ID}' then your forms will be automatically upgraded.
If you inserted a webform prior to July 2009 as HTML and you want to upgrade without re-inserting the form you can do so by editing the HTML code directly (for very advanced users only).
In order to update an existing web form with the new module, you will need to do the following -
Form Captcha Field Update
First, remove this section of the form -
<img src="/CaptchaProcess.aspx?color=skyblue" alt="Captcha Image" /><br />
<input class="cat_textbox_small" id="Captcha" name="Captcha" />
<input type="hidden" id="CaptchaH" value="{module_captcha}" name="CaptchaH" />
And replace that secion with this module -
{module_captchav2}
Form Javascript Validation Update
Now you will need to find the and remove following section of JavaScript validation from the form -
if (theForm.Captcha && theForm.CaptchaH)if(formfield(theForm.Captcha.value,'allupper')!= theForm.CaptchaH.value)why += appendBreak("- Word verification is incorrect.");
Once you've removed it you'll need to replace it with the following code:
if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image");
You can also specify the colors for the CAPTCHA using standard X11 color names with following syntax: {module_captchav2,backcolor,forecolor}. For example:
{module_captchav2,saddlebrown,darkgoldenrod,[size]}
Reverting back to legacy CAPTCHA V1
As at July 2009 - Captcha Functionality was upgraded from V1 to V2 to close known security holes in your Online Business. However because Captcha V2 (server side validation) works slightly differently to Captcha V1 (client side validation) some users may want to continue using CAPTCHA v1.
For all users who inserted their forms as HTML before the upgrade, the upgrade to CAPTCHA v2 has not affected your sites and your forms will still be using legacy CAPTCHA v1. If you have a form that is currently using CAPTCHA v2 and you want to revert to CAPTCHA v1 you will need to first insert your form in HTML form onto your page (as shown above).
You will then need to find this code on the web form -
{module_captchav2}
And replace it with:
<img alt="Captcha Image" src="/CaptchaProcess.aspx" /><br />
<input type="text" name="Captcha" id="Captcha" class="cat_textbox" />
<input type="hidden" name="CaptchaH" id="CaptchaH" value="{module_captcha}" />
To ensure Javascript Validation operates, you will need to find this code inside the Javascript form validation function at the bottom of the form code:
if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image");
</pre
And replace it with:
<pre>
if (theForm.Captcha && theForm.CaptchaH){
if (formfield(theForm.Captcha.value,'allupper') != theForm.CaptchaH.value)
why += appendBreak("- Word verification is incorrect.");
}
The full Javascript for the form validation function should look similar to this -
<script type="text/javascript">
var submitcount95578 = 0;
function checkWholeForm95578(theForm){
var why = "";
if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.Captcha && theForm.CaptchaH){
if (formfield(theForm.Captcha.value,'allupper') != theForm.CaptchaH.value)
why += appendBreak("- Word verification is incorrect.");
}
if(why != ""){alert(why);return false;}
if(submitcount95578 == 0){
submitcount95578++;theForm.submit();return false;
}else{
alert("Form submission is in progress.");return false;}
}
</script>
You'll need to save and publish the page with the edited form code for your changes to work.
Changing the color of the image (Captcha V1)
You can configure the color of the CAPTCHA image. After inserting the web form onto your web page, go to the source of your web form and locate:
<img src="/CaptchaProcess.aspx" alt="CAPTCHA Image" />
Change this to:
<img src="/CaptchaProcess.aspx?Color=red" alt="CAPTCHA Image" />
| AliceBlue | |
| AntiqueWhite | |
| Aqua | |
| Aquamarine | |
| Azure | |
| Beige | |
| Bisque | |
| Black | |
| BlanchedAlmond | |
| Blue | |
| BlueViolet | |
| Brown | |
| BurlyWood | |
| CadetBlue | |
| Chartreuse | |
| Chocolate | |
| Coral | |
| CornflowerBlue | |
| Cornsilk | |
| Crimson | |
| Cyan | |
| DarkBlue | |
| DarkCyan | |
| DarkGoldenrod | |
| DarkGray | |
| DarkGreen | |
| DarkKhaki | |
| DarkMagenta | |
| DarkOliveGreen | |
| DarkOrange | |
| DarkOrchid | |
| DarkRed | |
| DarkSalmon | |
| DarkSeaGreen | |
| DarkSlateBlue | |
| DarkSlateGray | |
| DarkTurquoise | |
| DarkViolet | |
| DeepPink | |
| DeepSkyBlue | |
| DimGray | |
| DodgerBlue | |
| Firebrick | |
| FloralWhite | |
| ForestGreen | |
| Fuchsia | |
| Gainsboro | |
| GhostWhite | |
| Gold | |
| Goldenrod | |
| Gray | |
| Green | |
| GreenYellow | |
| Honeydew | |
| HotPink | |
| IndianRed | |
| Indigo | |
| Ivory | |
| Khaki | |
| Lavender | |
| LavenderBlush | |
| LawnGreen | |
| LemonChiffon | |
| LightBlue | |
| LightCoral | |
| LightCyan | |
| LightGoldenrodYellow | |
| LightGreen | |
| LightGray | |
| LightPink | |
| LightSalmon | |
| LightSeaGreen | |
| LightSkyBlue | |
| LightSlateGray | |
| LightSteelBlue | |
| LightYellow | |
| Lime | |
| LimeGreen | |
| Linen | |
| Magenta | |
| Maroon | |
| MediumAquamarine | |
| MediumBlue | |
| MediumOrchid | |
| MediumPurple | |
| MediumSeaGreen | |
| MediumSlateBlue | |
| MediumSpringGreen | |
| MediumTurquoise | |
| MediumVioletRed | |
| MidnightBlue | |
| MintCream | |
| MistyRose | |
| Moccasin | |
| NavajoWhite | |
| Navy | |
| OldLace | |
| Olive | |
| OliveDrab | |
| Orange | |
| OrangeRed | |
| Orchid | |
| PaleGoldenrod | |
| PaleGreen | |
| PaleTurquoise | |
| PaleVioletRed | |
| PapayaWhip | |
| PeachPuff | |
| Peru | |
| Pink | |
| Plum | |
| PowderBlue | |
| Purple | |
| Red | |
| RosyBrown | |
| RoyalBlue | |
| SaddleBrown | |
| Salmon | |
| SandyBrown | |
| SeaGreen | |
| SeaShell | |
| Sienna | |
| Silver | |
| SkyBlue | |
| SlateBlue | |
| SlateGray | |
| Snow | |
| SpringGreen | |
| SteelBlue | |
| Tan | |
| Teal | |
| Thistle | |
| Tomato | |
| Turquoise | |
| Violet | |
| Wheat | |
| White | |
| WhiteSmoke | |
| Yellow | |
| YellowGreen |
Changing the size of the image (Captcha V1)
This is what the code for CAPTCHA image looks like -
<img src="/captchaprocess.aspx?color=black" alt="CAPTCHA Image" style=""/>
You can add something like this CSS to it to alter its size:
style="width:75px;height:25px"
The code would then look like this:
<img style="width:75px;height:25px" src="/captchaprocess.aspx?color=black" alt="CAPTCHA Image" style=""/>
