Adding reCAPTCHA to Wordpress
June 3, 2008 7:42 am Code Monkey
So, I finally added a CAPTCHA to my blog to prevent comment spam. I chose to go with reCAPTCHA from Carnegie Mellon University for a couple reasons:
- It’s pretty popular right now so I know the code will be actively maintained (important, because CAPTCHAs are broken all the time with bots).
- There’s a Wordpress plugin for it, so it was easy to integrate (check out WP-reCAPTCHA).
- It offers a benefit to society by helping to digitize old books (read more HERE).
I got the plugin installed, activated, and configured but the CAPTCHA wasn’t appearing in the comments section of my posts… problem. After some searching, I discovered that the Wordpress theme I’m using was missing the following line of code in Comments.php:
<?php do_action(’comment_form’, $post->ID); ?>
This line of code should be placed within the <form> block for submitting comments.
Once I added the above line of code, everything worked. However, my pages wouldn’t validate anymore (arg!). The reCAPTCHA code uses the <style> tag in the body, which can only be used in the HTML <head> block. Here’s the offending line of code in the WP-reCAPTCHA plugin (version 2.8.1, line 300):
<style type=’text/css’>#submit {display:none;}</style>
Since this code simply tries to set the style of the ‘Submit’ button, I just commented it out and everything validated again.
—
UPDATE 7/22/2008: Paul over a BlogLESS has an addition to this method that fixes a problem with double submit buttons being present. I took his code (HERE) and tweaked it slightly for my theme and added it to my comments.php file (located with my theme files). I replaced:
<input name=”submit” type=”submit” class=”submit1″ id=”submit” tabindex=”5″ value=”Submit Comment” />
with:
<script type=”text/javascript”>
//<![CDATA[
/* Cf. http://www.designlessbetter.com/blogless/posts/making-recaptcha-validate */
document.write('<input name="submit" type="submit" class="submit1" id="submit" tabindex="5" value="Submit Comment" />');
//]]>
</script>
Thanks Paul!
July 21st, 2008 at 8:06 am
Hi Tom,
I recently ran into this same problem. Unfortunately, if you just comment out that style block, your non-Javascript users are going to get a confusing double-submit button effect, and worse, it will allow them to bypass your CAPTCHA!
That said, I believe there’s a way to get both XHTML (1.0 Transitional) compliance and
with a usable and secure non-Javascript backup:
Making the reCAPTCHA Wordpress Plugin Validate
Hope this helps!
Paul
[Reply]
Tom reply on July 22, 2008 1:03 pm:
Thanks Paul! Post updated.
[Reply]