Did you ever build a Formidable Form using the reCAPTCHA and then test it on mobile devices? Of course you have! The reCAPTCHA doesn't fit and extends over the edges of the forms. This is because the reCAPTCHA is set in an iFrame with a width that can exceed the width of its field container. When that situation occurs, there is a fix!
The following code snippets, when added to your theme, will resize the reCAPTCHA's iFrame to fit properly on mobile devices.
Add this CSS to your theme's style.css or add it to the WordPress Customizer/Additional CSS section:
1 2 3 4 | .g-recaptcha { transform-origin: left top; -webkit-transform-origin: left top; } |
Change the #frm_field_xxx_container to your form's reCAPTCHA container at line 9 in the below jQuery and add it all to the After Fields section of the forms Settings/Customize HTML page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script> jQuery(document).ready(function ($) { "use strict"; function scaleCaptcha(elementWidth) { // Width of the reCAPTCHA element, in pixels var reCaptchaWidth = 304; // Get the containing element's width var containerWidth = $('#frm_field_xxx_container').width(); // Only scale the reCAPTCHA if it won't fit // inside the container if(reCaptchaWidth > containerWidth) { // Calculate the scale var captchaScale = containerWidth / reCaptchaWidth; // Apply the transformation $('.g-recaptcha').css({ 'transform':'scale('+captchaScale+')' }); } } scaleCaptcha(); // Update scaling on window resize $(window).resize( scaleCaptcha() ); }); </script> |
Hi Victor – scrap that last question – I finally found it 🙂
I now see you meant you need to replace the xxx in ‘#frm_field_xxx_container’ with the recaptcha’s field’s ID.
🙂
Hi Victor,
Thank you – just what I’m after, but I’m a little unclear when you say “Change the #frm_field_xxx_container to your form’s reCAPTCHA container at line 9”.
Can you please expand a little on what you’re referring to – the field’s key or id, or something else should go there?
Thanks