Unofficial idiots guide to installing reCAPTCHA by a bona fide idiot

[digitalmiles]

I am an idiot. I know a bit of HTML, CSS and a tiny amount of PHP -
but my main web design technique is to search for bits of other
people’s code that do what I want to do and then copy and adapt them.

If that is your technique too then these instructions might help. By
all means point out mistakes in these instructions but PLEASE don’t
ask for any advice, this really is the full extent of my knowledge on
the subject and is intended to help people at a beginners level like
me.

At the end of these instructions is some code that you can copy, paste
and adapt if you want.

I wanted to install a CAPTCHA on a webiste I did for my wife to see if
would cut down the spam

I found reCAPTCHA but the instructions made all sorts of assumptions
about things I didn’t know and were not written in a way that an idiot/
novice developer such as myself could follow easily.

reCAPTCHA clearly looked like the tool I needed and it looked like it
should be easy to install but the instructions were disorganised and
it took me a while to get it right. Most of the information is there
on the reCAPTCHA site but it’s not in a helpful order for the novice.

Here’s my version of what you need to do, step by step, if you want to
install a reCAPTCHA on a ‘contact us’ type page on your HTML website
which sits on a PHP enabled server. If you don’t know what a FORM is,
or what HTML or CSS or PHP are, then you need to get someone to do
this for you. You don’t need to know them in any depth at all. I
don’t.

Here we go:

1) Register

You need to register with reCAPTCHA and get your public and private
API keys. You do this here: https://www.google.com/recaptcha/admin/create

Copy the keys to a notelet, spreadsheet, textfile or document and save
it on to your desktop so that you can get at the keys easily to copy
and paste them into the code you are about to add to your pages.

2) Add CAPTCHA box to your page.

I am assuming that you are using a basic html FORM to collect
information from your visitors, like their email address.

Add the display CAPTCHA code to your FORM in the place where you want
your CAPTCHA to appear, usually after all the fields that you want
your user to fill in and before your ‘submit’ button

You can find the code here, use the ‘Challenge and Non-JavaScript
API’:
http://code.google.com/apis/recaptcha/docs/display.html

Replace the words your_public_key with code that you were assigned
when you registered. There are two instances in this code snippet.
Don’t get the public and private keys mixed up.


3) Add code that fetches the weird looking words from a CAPTCHA
library to your FORM

Add the ‘Client Side’ php code snippet that fetches the CAPTCHA messed
up words from the reCAPTCHA library to the form straight after the
<FORM> tag. You can access the code here:
http://code.google.com/apis/recaptcha/docs/php.html

Once again, replace the words your_public_key with code that you were
assigned when you registered. Don’t get the public and private keys
mixed up.

Notes:

The three lines of code need to be enclosed with the <?php and ?>
tags. They show this in the example but not in the box which gives you
the code.

On your form you will have a command ACTION=’filename.php’ enclosed
within the FORM tag. You need to change this to ACTION=‘verify.php’
and change the name of your processing script to ‘verify.php’ OR you
can change ‘ACTION=’verify.php’ to the name that you are already
using for your script.

If you are using <TABLE>s with your <FORM>s then the <TABLE> tags need
to be *within* the <FORM> tags and NOT visa versa. I eventually found
this hint on a troubleshooting page somewhere but it took a while!


4) Add processing code to server-side script

You need to add more PHP processing code to your server-side script,
the ‘verify.php’ file or the file that you are already using. You can
find this server-side code here:
http://code.google.com/apis/recaptcha/docs/php.html

This time replace the words your_private_key with the code that you
were given when you registered. Don’t get the public and private keys
mixed up

I also added the words ‘Sorry’ and ‘Please’ to the error message that
the code uses as follows:

// What happens when the CAPTCHA was entered incorrectly
die ("Sorry, the reCAPTCHA wasn't entered correctly. Please go
back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");

Once it was working I also deleted the error code as follows:

// What happens when the CAPTCHA was entered incorrectly
die ("Sorry, the reCAPTCHA wasn't entered correctly. Please go
back and try it again.");


5) Upload reCAPTCHA library

You need to download the recaptchalib.php file and then upload it to
the same folder/directory as your html and php files on your server
(or you need to know how to change pathnames). You can download the
file here:
http://code.google.com/p/recaptcha/downloads/list?q=label:phplib-Latest


6) Customise your reCAPTCHA box

You can customise the appearance of your CAPTCHA by following these
simple instructions:
http://code.google.com/apis/recaptcha/docs/customization.html

That should be it. Once you have uplaoded the ‘myform.html’ page, the
‘verify.php’ or ‘MyScript.php’ and the ‘recaptchalib.php’ files to
your server with your ftp client then you should be good to go.

Here are very simple myform.html and verify.php templates to show you
how the code for your pages *might* end up looking


code for myform.html

<html>
<head>

<!-- this is the code for customising the appearance of your captcha --
>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'white'
};
</script>
</head>

<body>
Add any text or other stuff here<br><br>

<!-- this is the code for the FORM -->
<FORM ACTION="verify.php" METHOD=POST>
<table border=0>

<!-- this is the code that fetches the weird looking words from the
library, you need to replace 'your_public_key' with the API key that
you got when you registered-->
<?php
require_once('recaptchalib.php');
$publickey = "your_public_key";
echo recaptcha_get_html($publickey);
?>
<tr><td colspan=2><b>You can email us using this form:<br></b></td></
tr>

<tr><td align="right">Your name:</td>
<td><INPUT TYPE=TEXT NAME="yourname" SIZE="41"></td></tr>

<tr><td align="right">Your email:</td>
<td><INPUT TYPE=TEXT NAME="EmailFrom" SIZE="41"></td></tr>

<tr><td align="right">Subject:</td>
<td><INPUT TYPE=TEXT NAME="Subject" SIZE="41"></td></tr>

<tr><td align="right" valign="top">Msg:</td>
<td><TEXTAREA NAME="message" ROWS="8" COLS="30"></TEXTAREA>
</td></tr>

<!-- this is the code that displays the CAPTCHA, you need to replace
both instances 'your_public_key' wwith the API key that you got when
you registered -->
<tr><td colspan=2>
<br>
To prevent spam please type the two words<br>below into the box as
shown then press send:

<br><br>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?
k=your_public_key">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?
k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
<br><br>
</td></tr>

<tr><td>&nbsp;</td>
<td align="right"><INPUT TYPE=SUBMIT NAME="SUBMIT" VALUE="send"><INPUT
TYPE=RESET NAME="RESET" VALUE="clear form"></td></tr>

</table>
</FORM>

You can add more text and stuff here if you want

</body>
</html>



code for verify.php

<?php

// this is the code you add to verify the captcha
require_once('recaptchalib.php');
$privatekey = "your_private_key";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
die ("Sorry, the reCAPTCHA wasn't entered correctly. Please go
back and try it again.");
} else {

// this is the code that processes your form once the captcha has been
verified

// get posted data into local variables
$EmailFrom = Trim(stripslashes($_POST['EmailFrom']));
$EmailTo = "yo...@emailaddress.com";
$Subject = Trim(stripslashes($_POST['Subject']));
$yourname = Trim(stripslashes($_POST['yourname']));
$message = Trim(stripslashes($_POST['message']));

// the your_error or your_success pages below are pages on your site
that the user is sent to for
// successfully or wrongly completing the FORM, NOT for successfully
entering the CAPTCHA

// validation - add the url of your error page
$validationOK=true;
if (Trim($EmailFrom)=="") $validationOK=false;
if (!$validationOK) {
print "<meta http-equiv=\"refresh\" content=
\"0;URL=your_error_page.html\">";
exit;
}

// prepare email body text
$Body = "";
$Body .= "yourname: ";
$Body .= $yourname;
$Body .= "\n";
$Body .= "message: ";
$Body .= $message;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to the url of your success or error page
if ($success){
print "<meta http-equiv=\"refresh\" content=
\"0;URL=your_success_page.html\">";
}
else{
print "<meta http-equiv=\"refresh\" content=
\"0;URL=your_error_page.html\">";
}
}
?>

[Jim Graziano]

Thank you soooo much for this. If it were not for you I would still be
screwing with their less than stellar instructions. This should be
pinned.

Jim

> $EmailTo = "y...@emailaddress.com";

[Charles Sweeney]

You're not like the idiots I know!
--
Charles Sweeney
http://FormToEmail.com
PHP mail script with reCAPTCHA

> $EmailTo = "y...@emailaddress.com";

[bgamach1]

I copied this code exactly and it didn't work.  I signed up for the private and public keys and the recaptcha didn't display. 

 

the PHP code shows up as text on the bottom of the page