Centering No Captcha Recaptcha

Centering No Captcha reCaptcha

I went with:

<style>
    /* already defined in bootstrap4 */
    .text-xs-center {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }
</style>
<div class="text-xs-center">
    <div class="g-recaptcha" data-sitekey=""></div>
</div>

Center align a Google Recaptcha field within Contact Form 7 (WP)

Add this code to your theme's style.css file, save it and check your WordPress contact page again where you published this form.

.wpcf7-recaptcha > div {
    margin: 0 auto;
}

Note: It will make effect all CF7 forms and make all Recaptcha fields center align.

CSS Center recaptcha object

Give the div around the captcha the following styles:

.wpcf7-form-control-wrap {
   margin: 0 auto;
   display: inline-block;
}

reCAPTCHA box not being aligned correctly

I'm posting an updated solution to this question, as the accepted solution does not work with the new version 2.0 of Google's ReCaptcha.

Correct formatting is:

.g-recaptcha div { margin-left: auto; margin-right: auto;}

The new ReCaptcha uses a single div class called g-recaptcha and a number of unidentified and unclassified div children. This is probably the cleanest safest way to get the widget to center properly.

Align google Captcha box centally on contact form 7

Put this CSS in the File.

.g-recaptcha > div{margin: 0 auto;}

Google reCaptcha doesn't show captcha challenge dialog on a real device

Per the documentation:

If reCAPTCHA is confident that this is a real user on a real device it will return a token with no challenge. Otherwise it will provide a visual/audio challenge to attest the humanness of the user before returning a token.

"No challenge" means no reCAPTCHA. With reference to your real device, Google is apparently already satisified as to your humanness, and does not require further confirmation.

verifyWithRecaptcha() is operating as designed.

Change positionining of captcha in comment section

I came up with a workarround. To give some context: The captcha appears to be appended to the last element inside the comment section, while ignoring the textarea comment box.

there is a WP-filter that can be used to rearrange the different fields. I arranged the fields according to my needs and then added an additional blank field at the end (placeholder), for the captcha to append to it. This seems to do the trick. Without the placeholder, even if the 'comment' field is last, it doesnt work.

Here is the code I used in the functions.php:

function change_comment_fields_order($fields)
{
  $comment_field = $fields['comment'];
  $author_field = $fields['author'];
  $email_field = $fields['email'];
  $url_field = $fields['url'];
  //unset
  unset($fields['comment']);
  unset($fields['author']);
  unset($fields['email']);
  unset($fields['url']);
  // the order of fields is the order below, change it as needed:
  $fields['author'] = $author_field;
  $fields['email'] = $email_field;
  $fields['url'] = $url_field;
  $fields['comment'] = $comment_field;
  //placeholder is a little hack that prevents the recaptcha thingy from being rendered in between the comment and the url fileds
  $fields['placeholder'] = "";
  // done ordering, now return the fields:
  return $fields;
}
add_filter('comment_form_fields', 'change_comment_fields_order');

---

Related Topics