Modify FormIt Recaptcha width

305 Posts

Dayton Web Design Reply #1, 10 years, 4 months ago

I am trying to resize my ReCaptcha on my contact form. Am running Revo 2.2.9 and have formit installed. My problem has to do with the maximum width of the recaptcha form field. The default width is too wide so on smaller devices it does not fit in the window. I have the rest of the site responsive all except for this one recaptcha field.

In trying to lower the width of my recaptcha field I found this file:
/public_html/core/components/formit/model/recaptcha/formitrecaptcha.class.php

Line #147 - #150
            'theme' => $this->modx->getOption('recaptchaTheme',$scriptProperties,'clean'),
            'width' => $this->modx->getOption('recaptchaWidth',$scriptProperties,250),
            'height' => $this->modx->getOption('recaptchaHeight',$scriptProperties,150),
            'lang' => $this->modx->getOption('cultureKey',null,'en'),

The width was at 500 and the height was at 300. I lowered this thinking it would shrink down my width but it still looks like the same size on the front end. I tried cleaning cache multiple times. When I look at source code it shows the new properties I have it set to, yet does not seem to show this half size in my simulator here: http://iphone4simulator.com/

Is there anywhere else I can control the width of this recaptcha field? Any suggestions? [ed. note: wbbuilder last edited this post 10 years, 4 months ago.]

Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/

305 Posts

Dayton Web Design Reply #2, 10 years, 4 months ago

OK. I think that if I change the recaptha theme from clean to white then it will fit just right without resizing. Once again it brings me back to the file above and I changed the 'clean' to 'white'. The white theme has less width than the clean theme. Yet whent I re-upload the file the theme stays the same.

Please look at my form here: http://www.ducksonsecurity.com/contact.html and let me know if you see the white theme as listed here: https://developers.google.com/recaptcha/docs/customization?csw=1 (I want to make sure it's not just my cache). Because I keep seeing the clean theme.

I have FormIt, FormZ, and FormitFast Pack all installed.

I have cleaned cache, and flushed all permissions after the change, yet it still shows the older clean version. I am thinking it must be some form of cache. When I look at all the above chuncks and snipplets I do not see any other area that defines the theme, width, and height. Yet the full size of the clean still shows.

Any suggestions, anyone? Why is this theme not even updating?

Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/

305 Posts

Dayton Web Design Reply #3, 10 years, 2 months ago

For those following. The default theme is clean and it's wider than the othter themes. While I was not able to resize the actual reCAPTCHA I was able to change the theme by over-riding. While it's not perfect it's very close even in the smallest device windows. So my recommendation is to change the Google reCAPTCHA theme from clean to red, white, or blackglass.

To change the theme (if you have formz installed):
Go to: Components> FormZ.
Find your form and click "update".
Click on Extra Tab.
Under Properties: add this: &recaptchaTheme=`white` (make sure to change the white to your theme name).
Click Save.

This will override the other theme settings.

All avaiable themes are have a thinner width than the default clean. So this will help it fit into windows for smaller devices much better.

Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/