Google recaptcha adds an extra DIV

  • Hi there,

    I see that when you enable the Google recaptcha, the plugin adds an extra div after footer.

    <div><div class="grecaptcha-badge"

    The point is that if you are using CSS grid layout on BODY tag to define some row layouts for example, this extra DIV breaks it.

    So, what about to use an ID in the parent DIV where the users can apply they own CSS styles?

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello @olimate,

    In fact, the complete HTML markup of reCAPTCHA v3 is something like this:

    <div class="grecaptcha-badge">
  <div class="grecaptcha-logo">
    <iframe src="https://www.google.com/recaptcha/api2/anchor[...]" [...]"></iframe>
  </div>
  <div class="grecaptcha-error"></div>
  <textarea id="g-recaptcha-response-[...]" name="g-recaptcha-response" [...]></textarea>
</div>

    But I’m afraid this code is not provided by CF7, but by Google.

    Best regards,
    Yordan.

    Thread Starter olimate

    (@olimate)

    I’m talking about the parent tag DIV without any class or ID… The plugin generates this:

    <div><div class="grecaptcha-badge"

    As you can see in the plugin page: https://contactform7.com/contact/

    Hello @olimate,

    Now I understand what you mean (sorry for the confusion).

    Did you try to simply hide the badge or play with .grecaptcha-badge directly?

    I’m not a CSS expert, but wouldn’t it be better to work with sections instead of applying rules directly in <body>?

    Best regards,
    Yordan.

    Thread Starter olimate

    (@olimate)

    Hey,

    I’m hidding .grecaptcha-badge through CSS rule, that’s not the problem. I just asking if it’s possible to add a class or id to the parent empty DIV. If not, then I’ll still applying the styles with CSS selectors body > div:last-of-type. But this in some scenarios cannot work, that’s why I ask it.

    Merry Xmas!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Google recaptcha adds an extra DIV’ is closed to new replies.