Search code examples
wordpresscontact-form-7recaptcha

Recaptcha V2 Image Select Popup Iframe Fixed Height Too Small


I am having an issue with implementation of recaptcha V2 code on wordpress Contact Form 7 plugin.

I am able to get the recaptcha "I am not a robot" checkbox rendering just fine but, when I check the box the pop Iframe which contains the selection images renders with height fixed at 225px. Because the height should be 580px (height of container div) it causes all of the content below the instruction text (the selection images) to be cutoff. I can directly edit the height size with firefox and the content shows.

From what I gather, there is no way to style the Iframe. Has anyone had this problem or know of a solution?

Thanks for your input.

Link to live site

The recaptcha is not implemented because it renders the form unusable. It was implemented using the standard Google code: <div class="g-recaptcha" data-sitekey="6LeyXiwUAAAAAMcd-K5P1m5YQj1JJg7SWJ_QrxB-">.


Solution

  • The issue is that instead of the embedded iFrame being sized with a height of 100%, it is being set with a fixed height. I'm not sure what's causing the issue (possibly a javascript conflict as it's inline embedded styling on the iFrame, itself).

    You can always override the styling in your own CSS like so:

    iframe[title="recaptcha challenge"] {
        height: 100% !important;
    }