Adding reCaptcha To A Custom Contact Form Page On WordPress


 

 

no-spam
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

You Might Also Like:

5 Responses to “Adding reCaptcha To A Custom Contact Form Page On WordPress”

  1. 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.

  2. giancarlo  on December 6th, 2009

    thanks for sharing this valik! I have been searching for a solution such as this. Cheers!

  3. web design miami  on December 8th, 2009

    thank u , very good solution ! this annoying spam , oh my God !

  4. 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!

  5. valiik  on December 17th, 2009

    LOL! Thanks Cheryl. I am glad it’s helping people. :)


Leave a Reply