Make reCaptcha smaller

  • dbmtp
    Asked on September 24, 2018 at 12:52 PM

    Hi team! Is there a way to shrink the recaptcha module? I have a small sticky form on my website, but the recaptcha is no staying within the boundaries of my form. Here is a link to the site, it would be the form on the far right edge of the page. It slides in and out... thank you! 

     

    http://www.mediatechplus.com

    Jotform Thread 1589667 Screenshot
  • Richie JotForm Support
    Replied on September 24, 2018 at 2:23 PM

    Kindly try this custom CSS code in your webpage.


    div.rc-anchor.rc-anchor-normal .rc-anchor-light{
          width: 190px;
    }

    Let us know if the issue still remains.

    Thank you/

  • dbmtp
    Replied on September 24, 2018 at 2:30 PM

    Richie,

    Thank you for the quick reply. I tried that, and I do not see any changes. Is there a way to add that CSS to the form itself, from Jotform, and not in my website? 

  • Richie JotForm Support
    Replied on September 24, 2018 at 3:49 PM

    It seems that  Google loads its own Iframe inside the widget iframe which means there is no way to access the Recaptcha DOM hence no possible customization inside the recaptcha iframe.

    You do, however, have access to the area around the recaptcha iframe under the div#recaptcha-body, and you can still use Custom CSS to modify the layout, add a little bit of content among other things.

     Google are not willing to allow reCaptcha V2 be modified to misrepresent their branding - especially since its a ubiquitous web security feature.

    Hope this information helps.

    Thank you.

  • dbmtp
    Replied on September 25, 2018 at 7:43 AM

    Richie,

    Thanks for the reply. So where inside the Jotform can I modify div#recaptcha-body? Thank you for your help!

  • Jed_C
    Replied on September 25, 2018 at 9:55 AM

    Did you replace your captcha field? If yes, please inject the CSS code below to adjust the width of the div where the captcha is.

    #cid_8 > div.form-captcha{

       width: 150px;

    }

    For the recaptcha-body, you'll need to inject the CSS code by following this guide https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    As I'm not able to see it on your site since you probably have changed it, the code might be like this.

    div#recaptcha-body{

       width: 150px;

    }

    I hope that helps. Let us know if you have any questions or if you need further assistance. 

  • dbmtp
    Replied on September 25, 2018 at 9:59 AM

    Jed,

    Yes! I didn't like how the recaptcha was formatting, so I went back to old school. But I appreciate your help. I will try again with recaptcha, using the details you provided above. I'll let you know how it turns out. Thank you again!

  • dbmtp
    Replied on September 25, 2018 at 10:03 AM

    Jed,

    I re-added reCaptcha, and added:

    div#recaptcha-body{

       width: 150px;

    }

    ... to the inject custom CSS section, and it is not affecting the width of it at all. Any ideas why?

  • Richie JotForm Support
    Replied on September 25, 2018 at 11:18 AM

    As what I have mentioned above, we can't directly edit the Google re-captcha in the forms as it is inside an Iframe of its own.

    You can try to check these articles that may help in editing the re-captcha.

    https://stackoverflow.com/questions/27691411/change-new-google-recaptcha-width

    https://stackoverflow.com/questions/30919715/how-can-i-change-a-google-recaptcha-width

    Thank you.

  • dbmtp
    Replied on September 25, 2018 at 3:35 PM

    I can't tell specifically which class I need to target inside Jotform, so I am having a hard time applying the changes shown on the links you provided. It's OK... it seems Google is making it hard to change on purpose. I just went back to the standard captcha.