Adding the best ReCaptcha Tutorial :) - UPDATED 16/4/2009
Posted: Sat Mar 07, 2009 7:05 pm
Greetings! Everyone,
DEMO SITE & TUTORIALS
In This Tutorial You can:
Create a contact form with the best re-captcha
Create a Custom Error Page with Go Back & Try Again
Create a Form Success Page with auto re-direct
Change CAPTCHA Theme
Or use the template provided.
I notice allot of CAPTCHA extentions etc but after doing a search noticed nobody have done a tutorial on adding ReCaptcha to there sites. First of all ReCaptcha uses probably millions of different codes which makes it harder for spammers to use automated programs to try and guess the code.
TEMPLATE NOW INCLUDED FOR NOVICE USERS
If you are not confident in following the below tutorial or wish to test etc... you can download the template. The template contains the contact form, captcha image code and box, feedback page, custom error page and captcha theme changer.
You can use the template on your site or for testing etc, entirely up to you. I still recommend read the tutorial.
Included in the download is a READ ME Instructions Guide. Everything you need is included with the template(s) so you dont need to download anything else.
WWW6 Users
Download Template
WWW5 Users
Download Template
1) First of all go to http://recaptcha.net/ and signup for an API key. This is needed otherwise nothing will work. You will need to add you website address and a public and private key will be issued immediately.
2) Secondly download the zip file from http://code.google.com/p/recaptcha/down ... lib-Latest . The only file you need from the zip is 'recaptchalib.php' the others are samples etc.
3) If not already done create your form using web builder. The Image below is a sample form.
Just above the submit button add a 'HTML' box and add the following code. The below code will display the reCAPTCHA image so just above the submit button is recommended.
** IMPORTANT: where it says: $publickey = "MYKEY"; replace the MYKEY with your PUBLIC KEY. Make sure it is the public key not private key.
Now you should have something like the below:
4) You will need to make sure the recaptchalib.php file is in the same directory as your form page file.
5) Now create a new page in web builder, name it what you want, it is going to be the page that confirms form was sent so i recommend naming it something like formsuccess.php
6) Go to your form page and double click the grid to bring up the form properties and do the following:
Form Name: Name it what you want
Action: Type your form success page here so in this example i would type:
formsuccess.php
Method: POST
Encoding Type: remove all text from this section
7) Now click 'ok'
Your form properties should look like below when you done the above.
Now go to formsuccess.php and right click on the formsuccess in site manager and choose 'page HTML' . Add the below code to the 'Start of Page'.
Now look at the code above you will see 3rd line down: $privatekey = "PRIVATEKEY";
replace PRIVATEKEY with your private key.
9) After the code above copy and paste the below after it: where it says:
$mailto = "MYEMAIL@MYWEBSITE.com"; replace MYEMAIL@MYWEBSITE.com with your email address. Also where it says:
$subject = "Query / Comments";
$message = "Query / Comments";
replace Query / Comments with your own text.
Now save everything and publish, make sure you upload recaptchalib.php to same directory as your form page.
Now you will have a fully working reCAPTCHA. You should have something like the the picture below.
There is something else you may want to do is download the 'redirect after time' web builder extenstion and have the formsuccess.php page to auto redirect after xx mount of seconds back to homepage or whichever page you want. Also i recommend including a text link so your members can click it if they don't want to wait xx mount of seconds or incase there browser does not support auto redirect.
Create your own Custom Error Page (Optional) 11/04/2009
To use your own custom error page do this.
on formsuccess.php page rightclick webpage and choose HTML.
at start of page find:
and replace with:
Now if you look at the new code it asks to display a webpage captcha_error.php if code entered is incorrect. Basically make a webpage called captcha_error.php, create page as you wish upload edited files and now when code is entered incorrect it will display the captcha_error.php page.
Once the user lands on the error page if the code they entered is incorrect you could type some text something like Go Back & Try Again, hyperlink it but use event: OnClick Action: Javascript Function Javascript: history.back(): this javascript that is built into WWW5/WWW6 will take user back to previous page and remember everything they type in on the form, this saves user having to retype all details etc back into form.
Example Error Page I use on my site.
Change Re-Captcha Theme (Optional) 15/04/2009
By adding a little piece of Java Script code you can change the theme of the recaptcha.
Re-Captcha comes with 4 themes to choose from.
Red - Default
Clean -
White -
Black Glass -
On your form page that contains the form and CAPTCHA Image right-click on the webpage in WW5/6 choose 'Page HTML', now click on the Between Head Tab and insert the following code
where you see blackglass replace that with any of the above (clean / white / blackglass / red)
Simply save and upload and your new re-captcha image theme will show.
Example with theme change:
Before: (default red)
After With Theme Change (White theme)
DEMO SITE & TUTORIALS
In This Tutorial You can:
Create a contact form with the best re-captcha
Create a Custom Error Page with Go Back & Try Again
Create a Form Success Page with auto re-direct
Change CAPTCHA Theme
Or use the template provided.
I notice allot of CAPTCHA extentions etc but after doing a search noticed nobody have done a tutorial on adding ReCaptcha to there sites. First of all ReCaptcha uses probably millions of different codes which makes it harder for spammers to use automated programs to try and guess the code.
TEMPLATE NOW INCLUDED FOR NOVICE USERS
If you are not confident in following the below tutorial or wish to test etc... you can download the template. The template contains the contact form, captcha image code and box, feedback page, custom error page and captcha theme changer.
You can use the template on your site or for testing etc, entirely up to you. I still recommend read the tutorial.
Included in the download is a READ ME Instructions Guide. Everything you need is included with the template(s) so you dont need to download anything else.
WWW6 Users
Download Template
WWW5 Users
Download Template
1) First of all go to http://recaptcha.net/ and signup for an API key. This is needed otherwise nothing will work. You will need to add you website address and a public and private key will be issued immediately.
2) Secondly download the zip file from http://code.google.com/p/recaptcha/down ... lib-Latest . The only file you need from the zip is 'recaptchalib.php' the others are samples etc.
3) If not already done create your form using web builder. The Image below is a sample form.
Just above the submit button add a 'HTML' box and add the following code. The below code will display the reCAPTCHA image so just above the submit button is recommended.
Code: Select all
<?php
require_once('recaptchalib.php');
$publickey = "MYKEY"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>Now you should have something like the below:
4) You will need to make sure the recaptchalib.php file is in the same directory as your form page file.
5) Now create a new page in web builder, name it what you want, it is going to be the page that confirms form was sent so i recommend naming it something like formsuccess.php
6) Go to your form page and double click the grid to bring up the form properties and do the following:
Form Name: Name it what you want
Action: Type your form success page here so in this example i would type:
formsuccess.php
Method: POST
Encoding Type: remove all text from this section
7) Now click 'ok'
Your form properties should look like below when you done the above.
Now go to formsuccess.php and right click on the formsuccess in site manager and choose 'page HTML' . Add the below code to the 'Start of Page'.Code: Select all
<?php
require_once('recaptchalib.php');
$privatekey = "PRIVATEKEY";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
die ("The reCAPTCHA wasn’t entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
}
?>Now look at the code above you will see 3rd line down: $privatekey = "PRIVATEKEY";
replace PRIVATEKEY with your private key.
9) After the code above copy and paste the below after it: where it says:
$mailto = "MYEMAIL@MYWEBSITE.com"; replace MYEMAIL@MYWEBSITE.com with your email address. Also where it says:
$subject = "Query / Comments";
$message = "Query / Comments";
replace Query / Comments with your own text.
Code: Select all
<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST'){
header('Refresh: 0; URL=/index.html');
exit;
}
$mailto = "my-email@mydomain.com";
$subject = "Query / Comments";
$message = "Query / Comments";
$name = Valid_Input($_POST['name']);
$email = Valid_Email($_POST['email']);
foreach ($_POST as $key => $value){
if (!is_array($value)){
$message .= "\n".$key." : ".$value;
}
else{
foreach ($_POST[$key] as $itemvalue){
$message .= "\n".$key." : ".$itemvalue;
}
}
}
$header = "From: ".$name." <".$email.">\n";
$header .= "Reply-To: ".$email."\n";
$header .= "MIME-Version: 1.0\n";
$header .= "Content-Type: text/plain; charset=utf-8\n";
$header .= "Content-Transfer-Encoding: 8bit\n";
$header .= "X-Mailer: PHP v".phpversion();
mail($mailto, $subject, stripslashes($message), $header) or exit('Fatal Mail Error!');
function Valid_Input($data){
list($data) = preg_split('/\r|\n|%0A|%0D|0x0A|0x0D/i',ltrim($data));
return $data;
}
function Valid_Email($data){
$pattern = '/^([0-9a-z]([-.\w]*[0-9a-z])*@(([0-9a-z])+([-\w]*[0-9a-z])*\.)+[a-z]{2,6})$/i';
if (preg_match($pattern,$data)){
return $data;
}
else{
return $GLOBALS['mailto'];
}
}
?>Now you will have a fully working reCAPTCHA. You should have something like the the picture below.
There is something else you may want to do is download the 'redirect after time' web builder extenstion and have the formsuccess.php page to auto redirect after xx mount of seconds back to homepage or whichever page you want. Also i recommend including a text link so your members can click it if they don't want to wait xx mount of seconds or incase there browser does not support auto redirect.
Create your own Custom Error Page (Optional) 11/04/2009
To use your own custom error page do this.
on formsuccess.php page rightclick webpage and choose HTML.
at start of page find:
Code: Select all
if (!$resp->is_valid) {
die ("The reCAPTCHA wasn’t entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
}Code: Select all
if(!$resp->is_valid) {
header("location:captcha_error.php");
die();
}Now if you look at the new code it asks to display a webpage captcha_error.php if code entered is incorrect. Basically make a webpage called captcha_error.php, create page as you wish upload edited files and now when code is entered incorrect it will display the captcha_error.php page.
Once the user lands on the error page if the code they entered is incorrect you could type some text something like Go Back & Try Again, hyperlink it but use event: OnClick Action: Javascript Function Javascript: history.back(): this javascript that is built into WWW5/WWW6 will take user back to previous page and remember everything they type in on the form, this saves user having to retype all details etc back into form.
Example Error Page I use on my site.
Change Re-Captcha Theme (Optional) 15/04/2009
By adding a little piece of Java Script code you can change the theme of the recaptcha.
Re-Captcha comes with 4 themes to choose from.
Red - Default
Clean -
White -
Black Glass -
On your form page that contains the form and CAPTCHA Image right-click on the webpage in WW5/6 choose 'Page HTML', now click on the Between Head Tab and insert the following code
Code: Select all
<script type= "text/javascript">
var RecaptchaOptions = {
theme: 'blackglass'
};
</script>Simply save and upload and your new re-captcha image theme will show.
Example with theme change:
Before: (default red)
After With Theme Change (White theme)
