Adding reCaptcha To A Custom Contact Form Page On WordPress

Image credit: Madison Magazine
At first I thought this was going to be easy, just install the WordPress reCaptcha plugin and add a couple of lines to the form and that should do it. Once I was ready to go and actually do it, I could not find any info on teh web on how to do this, so after two hours of research and trial and error I found the answer. I hope this will help someone out there.
I am building a custom contact page with a PHP contact form on it. I need the reCaptcha to sit at the bottom of the form and keep Spammers out.
First we needed to go and register an account at reCaptcha.net and get the public and private key for the domain the reCaptcha is going on. Then download the reCaptcha library PHP file that will be including in the form processing code.
Now we add a piece of JavaScript code where we want the captcha to sit:
<form name="contactform" method="post" action=""> <h3>Contact Us</h3> Name: <input type="text" name="fname" /> Email: <input type="text" name="femail" /> Message: <textarea name="fmessage" cols="45" rows="5"> </textarea> <!-- YOUR RECAPTCHA CODE GOES HERE --> <script type="text/javascript" src="http://api.recaptcha.net/challenge?k=PUBLICKEYGOESHERE"> </script> <noscript> <iframe src="http://api.recaptcha.net/noscript?k=PUBLICKEYGOESHERE" height="300" width="500" frameborder="0"></iframe> <textarea name="recaptcha_challenge_field" rows="3" cols="40"> </textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"> </noscript> <!-- END RECAPTCHA CODE --> <input type="submit" name="button" id="button" value="Send Contact Message" /> </form>
Enter your public key where it says PUBLICKEYGOESHERE.
So there we have the form part, now we need to add a verifier on the form processing side to check if the captcha was entered correctly. To do this we add some PHP code into the beginning of the processing code.
<?php
require_once('recaptchalib.php');
if ($_POST['email'] != '') {
$privatekey = "PRIVATEKEYGOESHERE";
$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 . ")");
} else {
YOUR FORM PROCESSING PHP GOES HERE
}
?>
Add your private key where it says PRIVATEKEYGOESHERE.
First it checks to make sure the reCaptcha was entered correctly and if it has, it sends them down to process the form, if not it displays an error.
Very simple. Hope it helps someone.
Until next time,
~ Valik
- Digg it
- Save This Page
Like This Post?
You Might Also Like:
5 Responses to “Adding reCaptcha To A Custom Contact Form Page On WordPress”
Leave a Reply







tysoncadenhead on December 5th, 2009
I have become a big fan of reCaptcha lately. It has completely resolved the spam issues on the sites I’ve deployed it to. It’s good to see that other people are using it too.
giancarlo on December 6th, 2009
thanks for sharing this valik! I have been searching for a solution such as this. Cheers!
web design miami on December 8th, 2009
thank u , very good solution ! this annoying spam , oh my God !
Azterik Media on December 17th, 2009
Thanks Valik! I always appreciated when someone else does the two hours of hair-pulling, nail biting, why was I thinking this was going to be easy, work for me. Keep up the great work!
valiik on December 17th, 2009
LOL! Thanks Cheryl. I am glad it’s helping people. :)