The form below shows an example of adding CaptchaPro to an online form. The CAPTCHA was added according to the integration instructions. The browser view is shown in the left column with the corresponding source code shown on the right. We have cut out wrapping HTML code just to show you what and where the modifications were made. Modified code is shown in brown color. Remember to substitute highlighted in yellow "YOUR CAPTCHA KEY" phrase with the captchaprokey value generated specifically for your web form. Otherwise, you'll see an "Invalid Request" image in place of a valid CAPTCHA code.
You may enter populate this form and click on "Submit" button. If the code is correct, you'd be redirected to a thank you page. Otherwise, an error message will be shown. Please note, that code responsible for error processing and error message display is not part of the integration code.
<html>
<head>
<title>Sample web form with basic CaptchaPro implementation</title> <!-- Enable persistence of form field values --> <script language="javascript" type="text/javascript" src="http://www.captchapro.com/global/js/formfields_persistence.js"></script>
... ... ...
</head>
<body>
... ... ... <!-- Point web form to CaptchaPro controller -->
<form name="integration_example_form" method="POST"
action="http://app.captchapro.com/captchapro_war/validation"> Name: <input type="text" name="firstName" class="text_field" size="40"><br> Description: <textarea rows="5" cols="30" name="description"></textarea><br><br>
<!-- Start CaptchaPro challenge-response test --> <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> <!-- End CaptchaPro challenge-response test -->
