1

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-">.

James
  • 70
  • 1
  • 9
  • Please provide some reference to your code (i.e. a link to your site, or at least a screenshot). – Ryan Aug 11 '17 at 20:32
  • Question updated with link. – James Aug 12 '17 at 21:40
  • Let me know if I'm understanding correctly: on the contact page of your site, you have a Contact Form 7 email form, which you want to add reCaptcha to, but the sizing of the iFrame that is injected into your site for the reCaptcha cuts it off? Also, when you say you're using "the standard code" do you mean the built-in Google reCaptcha integration, or are you manually including the code? – Ryan Aug 14 '17 at 15:08
  • The inital recaptcha iframe with the checkbox is rendering correctly. The issue I'm having is when the user checks the checkbox, the popup iframe that comes up with the verification images has a fixed height of 225px which is causing all of the images to be hidden. I will activate it on the live site for today if you get the chance to view it. – James Aug 14 '17 at 19:28

2 Answers2

2

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;
}
Ryan
  • 579
  • 1
  • 5
  • 17
0

Use the CSS property "zoom" on the iframe. That will allow you to uniformly scale the contents inside of an iframe allowing you to get it to the needed height.

Nosajimiki
  • 1,073
  • 1
  • 9
  • 17
  • The problem with this is, that iframe isnt stylable since it is dowloaded google code. The issue is with the popup window that appears after checking the checkbox, not the initial recaptcha box. – James Aug 14 '17 at 20:39
  • Okay, so this is a bit trickier than the recatcha box, but seems to be do-able. rc-imageselect-table- is the class of the table that contains the recapcha inside of the iframe. So if you can pattern match that, you should be able to inject the CSS using something like this: https://stackoverflow.com/questions/35188324/inject-css-into-iframe-from-third-party – Nosajimiki Aug 14 '17 at 21:52
  • Just re-read the question. I thought you were trying to make the box shorter, but it sounds like something is truncating the box and you want to make it the right height? If that is the case, you just need to fix the height of the Div containing the iframe. You likely have a Custom CSS rule that is accidentally hitting it. If you clarify your CSS rule, you can probably eliminate this bug. If you can't find the rule, you can over-ride it using a more specific rule or an !important – Nosajimiki Aug 14 '17 at 22:00