In your form:
Simply place this code on your page where you want PhotoCaptcha to apear in your form:
<script language="javascript" src="http://photocaptcha.us/makejava.php?theme=<skin_number>&frame=<splash_version>"></script>
(must be between <form> and </form> tags).
<skin_number> and <splash_version> in url need to be replacet with values.
- skin_number is obviously aperance of PhotoCaptcha
- splsh_version defines what people see when they solve captcha. It can be either 'default' or 'default-submit'
'default-submit' is ment to be used when you want to replace your 'submit' button with captcha. it will show submit button once you prove you're not a robot (like captchas on this site)
'default' looks almost exactly the same, only it won't display 'submit' button.
check skins section to see and chose your skin. ;)
Optional:
- If you want make PhotoCaptcha controll elements on on your page, you can define 'PhotoCaptchaCompletion()' JavaScript function on your page.
If 'PhotoCaptchaCompletion()' function is defined, then it will be executed once captcha is solved correctly.
For example you can use it to replace captcha with 'submit button', submit form or whatever you want.
- If your form contains inputs and/or textareas with 'photoCaptchaRequired' class, PhotoCaptcha will monitor them. If any of those inputs will be empty, submit button of PhotoCaptcha (or your own if you give it 'photoCaptchaSubmitBtn' id) will be disabled preventing users from sending incomplete form.
If no inputs/textareas with 'photoCaptchaRequired' class are present, this function is disabled.
Note that in many browsers pressing enter in text input will trigger fotm's submission. PhotoCaptcha blocks taht behavior in inputs in 'photoCaptchaRequired' class.
Processing script
Except regular form data, your processing script will recieve recieve one extra piece of data from PhotoCaptcha.
It will be named 'PhotoCaptchaResponse'.
In order to verify if captcha was solved correctly your script need's to contact API sending PhotoCaptchaResponse and client's IP address.
It's simple GET request in format http://photocaptcha.us/check.php?ip=[CLIENT'S IP]&data=[CAPTCHA RESPONSE STRING] (without brackets).
In response from API your processing script will recieve set of numerical values separated by comas.
Response format will be: veryfied,runtime,CaptchaLoadCount,KeystrokeCount,ClickCount where:
- 'veryfied' will be '0' or '1' (1-solved, 2-unsolved)
- 'runtime' is number of 1/100 seconds from moment when javascript was loaded to submiting form
- 'CaptchaLoadCount' tells you how mny times client loaded captcha image
- 'KeystrokeCount' how many times keyboard was pressed
- 'ClickCount' number of mouse clicks on page
If your processing script is PHP, then you can use this function:
function PhotoCaptcha($ip, $response){
$URL = 'http://photocaptcha.us/check.php?ip=' . $ip . '&data=' . $response;
$data = file_get_contents($URL);
$data = explode(',', $data);
$out['solved'] = $data[0];
$out['runtime'] = $data[1];
$out['loads'] = $data[2];
$out['keystrokes'] = $data[3];
$out['clicks'] = $data[3];
return $out;
}
And then call it to get response in form of aray:
$captcha = PhotoCaptcha($_SERVER['REMOTE_ADDR'], $_POST['PhotoCaptchaResponse']);Obviusly in this example if $captcha['solved'] == 0, captcha wasn't solvet properly and u have to send client back to form.
header('Location: ' . $_SERVER['HTTP_REFERER']);
Simple processing script could look like this:
<?php
function PhotoCaptcha($ip, $response){
$URL = 'http://photocaptcha.us/check.php?ip=' . $ip . '&data=' . $response;
$data = file_get_contents($URL);
$data = explode(',', $data);
$out['solved'] = $data[0];
$out['runtime'] = $data[1];
$out['loads'] = $data[2];
$out['keystrokes'] = $data[3];
$out['clicks'] = $data[4];
return $out;
}
$captcha = PhotoCaptcha($_SERVER['REMOTE_ADDR'], $_POST['PhotoCaptchaResponse']);
if($captcha['solved'] == 0){
header('Location: ' . $_SERVER['HTTP_REFERER']);
die();
}
//rest of your code
?>
Simple, huh? ;)