CaptchaPro Integration Instructions
The instructions below outline the minimum necessary steps to add a previously configured
CAPTCHA to an online form. The steps are identical for any form with the
exception of the CAPTCHA key (e.g. API Key). The latter is unique per each form. We've designed
our service to be secure and very easy to integrate. Contrary to other CAPTCHA
services, there are no server side or dynamic scripting changes required. The steps are
simple and can be performed by any junior HTML programmer. As always, we
welcome your feedback and suggestions on how we can
improve the integration process any further.
NOTE: These integration instructions assume that you have already registered for the CaptchaPro service and have obtained the necessary CAPTCHA keys. If not, please register for service. The key(s) will be generated at the end of the registration. You will need a separate key for each form that you wish to add a CAPTCHA test to.
To protect an online form with CAPTCHA follow these steps:
| Step 1: |
Locate the opening form tag (<form...) in the source code and replace the action property with the URL highlighted below:
<form name="your_form_name " method="POST"
action="http://app.captchapro.com/captchapro_war/validation"> |
| Step 2: |
Copy and paste this snippet where you wish to add a CAPTCHA test (usually at the end of a web form right above the "Submit" button). Then, substitute
"YOUR CAPTCHA KEY" string highlighted in yellow with the CAPTCHA key generated for this form at the end of the registration process.
<script language="javascript" type="text/javascript" src="http://www.captchapro.com/global/js/captchapro_util.js"></script>
<table>
<tr><td>Enter code shown in <br />the picture on the right:</td>
<td rowspan="2" align="center"><img id="captchaImage"
src="http://app.captchapro.com/captchapro_war/animagebroker?captchaprokey=YOUR CAPTCHA KEY"
onClick="javascript:resizeCaptcha()" border="0" alt="Click to toggle image size"></td>
<td><a href="javascript:resizeCaptcha();" >
<img src="http://www.captchapro.com/global/images/accessibility.gif"
alt="Click to enlarge this image" border="0"></a><br>
<a href="javascript:reloadCaptchaImage()">
<img src="http://www.captchapro.com/global/images/refresh.gif"
alt="Display different code" border="0"></a>
</td></tr>
<tr><td><input type="text" name="captchapro_response" size="12" autocomplete="off"><br>
<span class="form_hint_text">(not case sensitive)</span></td>
<td></td>
</tr>
</table>
Select code |
Now, upon clicking Submit button, the form data along with the user entered CAPTCHA value will be forwarded to the CaptchaPro validation server. If the CAPTCHA test passed successfully, the data will be routed to the form controller that you've specified during the registration process. If the CAPTCHA value is incorrect or missing, the CaptchaPro server will redirect back to the original web form URL with CAPTCHA Error Code appended at the end of the URL (see list of error codes). The error codes may be useful for displaying custom error messages on your web page (see our example).
This is it! At this point you should have CAPTCHA test implemented and working hard to protect your form from the online spam submissions. To add CAPTCHA to the other forms repeat the same steps.
If you run into any issues, please review our FAQs page for a potential solution. If solution is not listed there, please contact support and will be glad to help you.
For real world examples and userful code samples, please refer to examples of CaptchaPro implementation.
|
