Adding space between reCAPTCHA and the comment Submit Button on WordPress

Posted by Chris on March 8, 2009

When I embedded reCAPTCHA into my WordPress blog the first thing I noticed was that reCAPTCHA was sitting directly on top of the “Submit Comment” button without allowing any breathing room between the two. The appearance was rather obtrusive so I decided to do a quick search for a solution using my buddy, “Google.” Normally I would muck around with the code myself and call it a day, but I figured there was someone who already found a fix and shared it with the rest of us. As it turns out, there are many forum discussions about this same exact issue and several on the WordPress forum, yet no solutions were ever posted.

So, after wasting a few minutes searching for a solution, I decided to look through the code so I could figure out how reCAPTCHA was embedded into the comment section of the blog and attempt to correct its placement. My first instinct was to add a simple “break (<br/>)” tag in the comments.php file, above the “Submit Comment” button code, so this way it would add some space. However, this edit was unsuccessful and I quickly realized the only way to make this work was by combing the reCAPTCHA PHP file and looking for the correct section in the code to add a “<br/>” tag. After I opened the reCAPTCHA PHP file it did not take more than a minute to figure out which section needed the “<br/>.”

Here is what you need to do in order to add space between reCAPTCHA and the comment “Submit Button.” If you are not using a web development application for editing, simply login to your WordPress Admin panel and navigate to Plugins –> Editor. On the right-hand side of the editor locate the link named “wp-recaptcha.php,” and click on it to open the file. After you load the file in your editor, scroll down the page and search for the section titled “reCAPTCHA – The reCAPTCHA comment spam protection section.” You will see a section of JavaScript in the PHP code that looks identical to what I posted below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
COMMENT_FORM;
}
 
else {
$comment_string = <<<COMMENT_FORM
<div id="recaptcha-submit-btn-area"></div> 
<script type='text/javascript'>
var sub = document.getElementById('submit');
sub.parentNode.removeChild(sub);
document.getElementById('recaptcha-submit-btn-area').appendChild (sub);
document.getElementById('submit').tabIndex = 6;
if ( typeof _recaptcha_wordpress_savedcomment != 'undefined') {
document.getElementById('comment').value = _recaptcha_wordpress_savedcomment;
}
document.getElementById('recaptcha_table').style.direction = 'ltr';
</script>

Take notice of line #6 in the above code. This is where we need to add the “<br/>” tag – without the quotes. Below is the code with the “<br/>” already added so you can see how it should look after the edit just in case you are not familiar with HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
COMMENT_FORM;
}
 
else {
$comment_string = <<<COMMENT_FORM
<div id="recaptcha-submit-btn-area"><br/></div> 
<script type='text/javascript'>
var sub = document.getElementById('submit');
sub.parentNode.removeChild(sub);
document.getElementById('recaptcha-submit-btn-area').appendChild (sub);
document.getElementById('submit').tabIndex = 6;
if ( typeof _recaptcha_wordpress_savedcomment != 'undefined') {
document.getElementById('comment').value = _recaptcha_wordpress_savedcomment;
}
document.getElementById('recaptcha_table').style.direction = 'ltr';
</script>

Now click “Update File” to save the file. That’s it – done!

Appearance before the edit

Appearance before the edit


Appearance after the edit

Appearance after the edit


I felt I should share this simple solution with the “WordPress World” since many of you have been searching high and low for a solution. Perhaps this will be corrected in future reCAPTCHA versions for WordPress.