1

I am currently struggling with resizing (or styling) the reCaptcha element in a form. When viewing the form on a mobile device (portrait orientation), it hangs off a bit and looks pretty sloppy.

The form is from formstack and rendered by a script. I have been able to style every other element of the form using CSS and add placeholder attributes to each input with jQuery without any issue whatsoever. However, it seems once I get down to the reCaptcha block neither of these options are working. I have been able to made changes directly in Chrome dev tools to get the result I want (or one that will work, rather), however once applying these with CSS OR jQuery, neither have worked. I have also looked through these google recaptcha docs, however this isn't even the same kind... instead, this is what I'm working with.

SO, I am unsure of what to try next or where to look for a solution.

I have tried targeting individual elements and changing their size, I have tried just removing the background from the elements since this alone would make it look less "funky".

Has anyone else had a similar issue? If the code is needed I will provide it, it's just quite a bit of code rendered by said script. I understand it may be hard to even suggest where I'm going wrong without it but I wasn't sure if someone maybe able to just suggest another option to try?

Thanks!

Community
  • 1
  • 1
HKoehler
  • 11
  • 3
  • What do you mean by "the form on a mobile device [...] hangs off a bit"? Does this mean that a side of the form is cut off because it extends beyond the right or bottom edge of the display? – JohnH Jul 18 '17 at 21:28

2 Answers2

0

Use the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.

With the help of just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:

<div class="g-recaptcha" 
 data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 
 style="transform:scale(0.77);transform-origin:0 0">

`

hardik pandey
  • 21
  • 3
  • On what element should I add this? There isn't a pre-existing div with this class in the generate html. – HKoehler Jul 18 '17 at 18:40
  • You have to add this in the "Script Tag". The CAPTCHA code can be customized in the Script tag. You can change the size of the CAPTCHA by changing $image_width & $image_height. The number of characters in the CAPTCHA can be changed by updating $characters_on_image. – hardik pandey Jul 18 '17 at 18:58
-1

I have used this code

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'),

example link

octobus
  • 1,246
  • 1
  • 14
  • 20
Wunderboy
  • 1