Ronald Blake asked 1 year ago
My question and problem why I am asking follow below: I have inserted a
reCaptcha v2 check box type and also tried v3 in a form on my websites
Contact Form page and also in the footer present on all pages.
In both cases the reCaptcha size is static so when viewed in my contact
page the reCaptcha is too wide in tablet and phone size screen views.
In my footer which is split into four columns it is as well at full
screen size and tablet and phone sizes but I can compensate in full
screen size by making that particular column wider than the others.
A little background and additional data upfront. My website is Wordpress,
my Theme is PopularFX and my Template that separately generates the
footer styling is Immersion. I am using the free tier of PopularFX and
not the pro version so access to styling and custom CSS controls specific
to selected elements are limited as of course are control to the div in
Formidable Forms that the reCaptcha is inserted into.
Google does provide how-tos on ways to modify a new encapsulating div
container to make a reCaptcha responsive but given my access limitations
and limited programming knowledge I have to admit that I have thus far
not figured out the correct files to tweak for the Javascripting mods and
the CSS styling via my cPanel file manager nor have I been able to manage
it via attempted inline CSS (which Google's pages also cover I believe or
I found in Google search tool searches on the web) using custom CSS in the
customize options from the theme appearance tool or via customize custom
CSS block accessible in Pagelayer's editing toolset.
Bottom line is my knowledge is lacking on where to implement the
customizations and I would love to know if any of you have ran into the
same issues using google reCaptcha in your forms and how you managed to
modify your relevant documents in your Wordpress site to make the
reCaptcha resizable or responsive.
Here is my website: ronaldblake.com
(Note: Am not currently a business albeit may become one but, not trying
to self promote)
Here are the Google page topics on modifying the reCaptcha:
https://developers.google.com/recaptcha/docs/display
https://developers.google.com/recaptcha/docs/display#render_param
Any help or guidance to steer me to good information to help me self
modify the coding and where to apply it correctly would be greatly
appreciated.
Thanks in advance
Sincerely,
Ronald L. Blake
Victor Font answered 1 year ago
Ronald Blake
replied 1 year ago Thank you Victor, I will check it out and let you know how it works out!
Ronald Blake
replied 1 year ago For those who may find this in the future:
The how-to Victor sent me the link to above which he authored by the way did work for me with minor modification for the variations in my code in that my parent div named the reCaptcha as .frm-g-recaptha so I had to use that instead of .g-recaptcha in the CSS and had to change line 18 in the jQuery sample code to .frm-g-recaptcha from .g-recaptcha as well.
For line 10 in the jQuery the only change required was replacing XXX with 9 in my case being that 9 was my form field number so for me line 10 was the following:
var containerWidth = $('#frm_field_9_container').width();
Also as Victor indicated the div to modify is a higher parent div to the reCaptcha. It can be found by right clicking the reCaptcha in your browser and selecting Inspect from the popup menu and then scrolling up the code until finding the div with the form_field_xxx_container where xxx represents the number you will see instead in your div code! In my case after clicking inspect I had to scroll way up 8 div levels to find the iframe and the div encapsulating it which was the 9th and then up 3 more div parent levels higher to locate the correct div ID line in the code!
Hope this helps someone else as well in the future and all the credit goes to Victor who put me on the right path with sample code and where to insert it and I just had to figure out the variations needed in my case scenario!
Sincerely,
Ronald L. Blake
Please login or Register to submit your answer
