Make reCaptcha smaller

  • Profile Image
    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

  • Profile Image
    Richie_P
    Answered on September 24, 2018 at 02: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/

  • Profile Image
    dbmtp
    Answered on September 24, 2018 at 02: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? 

  • Profile Image
    Richie_P
    Answered on September 24, 2018 at 03: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.

  • Profile Image
    dbmtp
    Answered on September 25, 2018 at 07:43 AM

    Richie,

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

  • Profile Image
    Jed_C
    Answered on September 25, 2018 at 09: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. 

  • Profile Image
    dbmtp
    Answered on September 25, 2018 at 09: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!

  • Profile Image
    dbmtp
    Answered 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?

  • Profile Image
    Richie_P
    Answered 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.

  • Profile Image
    dbmtp
    Answered on September 25, 2018 at 03: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.