Fixing Alignment of ReCaptcha and Submit Button in WP-reCAPTCHA Plugin

There is an ongoing bug in the popular WordPresss reCAPTCHA plugin WP-reCAPTCHA which causes the reCAPTCHA box to sit right on top of the Submit button, with no space between them at all. Ideally, there should be a line break between the two so as to maintain some visual separation.

There is also another issue where the reCAPTCHA box is shown below the Submit button, which again looks very odd and makes the comment form difficult to use.

The fixes for both the issues are very simple and are given below.



1. Adding a space between reCAPTCHA and Submit button

The fix for this issue is very simple. You just need to add a line break in the div tag for the reCAPTCHA box. The code that needs fixing is in wp-recaptcha/recaptcha.php, and is given below for convenience. The fix is highlighted in red:

if ($this->options['xhtml_compliance']) {
$comment_string = <<<COMMENT_FORM
<div id="recaptcha-submit-btn-area">&nbsp;<br/></div>
COMMENT_FORM;
}

else {
$comment_string = <<<COMMENT_FORM
<div id="recaptcha-submit-btn-area">&nbsp;<br/></div>
<noscript>
<style type='text/css'>#submit {display:none;}</style>
<input name="submit" type="submit" id="submit-alt" tabindex="6" value="Submit Comment"/>
</noscript>
COMMENT_FORM;

2. Issue with reCAPTCHA box below Submit button

The fix for this is to add an id=”submit” in the Submit button HTML tag in your WordPress theme’s comments.php file.

For example, your submit button tag may be as follows:

<p><input type="submit" class="button" value="Submit Comment"/><?php
comment_id_fields(); ?></p>

You need to change it to:

<p><input type="submit" class="button" id="submit" value="Submit
Comment"/><?php comment_id_fields(); ?></p>

Signature

Leave a Reply