What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How To Edit CSS Of Google ReCaptcha

    Asked by markashton on October 13, 2015 at 01:12 PM

    This form: https://form.jotform.com/52855169722968

    Has Google Captcha Widget only as a test.

    In the wizard for this widget ... you can see that one can edit the CSS for the widget.

    I have applied the following CSS:

    .rc-anchor-light {
    background: #fff;
    border: 0px;
    color: #000;
    }

    Can yopu advise me on what I'm doing wrong please ... as the CSS does not work ... and yet in Inspector it appears to do so.

    Many Thanks 

    Regards Mark

     

    custom CSS recatpcha CSS google recaptcha
  • Profile Image
    JotForm Support

    Answered by Welvin on October 13, 2015 at 03:47 PM

    Hi Mark,

    Our apologies, but it seems overriding the reCaptcha styles is not possible. Even if you add the !important declaration in the custom CSS, still not working.

    I have forwarded this to our widget team. We will let you know as soon as we get an update about this matter.

    Thank you for reporting.

  • Profile Image

    Answered by markashton on October 13, 2015 at 04:58 PM

    Oh your joking?

    Another widget that doesn't work properly.

    Who tested this before you released it? No one?

    Who wants a widget that you can't style?

    You put me onto this here: http://www.jotform.com/answers/472573-Form-security-using-a-simple-maths-question but it's not market-ready is it?

    That's another hour gone of my business.

    I wouldn't mind ... but we both know that this will never be fixed.

    Please see what you can do with the devs ... I think this is the best captcha system you have.

    Mark

  • Profile Image

    Answered by markashton on October 13, 2015 at 05:37 PM

    Hi,

    I've just tested all the other functions ... like height and width.

    Can I just ask ... what is it possible to edit with this widget?

    Is there any parameter that you can edit at all?

    Regards Mark

  • Profile Image
    JotForm Support

    Answered by Welvin on October 13, 2015 at 07:06 PM

    Hi Mark,

    Our apologies. I'm sure our developers made some test. But as far as I know, these are settings which are available in every type of widget. We will see when our widget team checks this.

    Thank you for your feedback.

  • Profile Image
    JotForm Support

    Answered by TitusN on October 14, 2015 at 12:45 AM

    Hey Mark! 

    The Custom CSS rollout was applied to all Iframe widgets (a type of widget that loads on the form using an Iframe). 

    The idea was to allow users to access the iframe DOM and make customization within reason.  

    ~~

    It works for Google Recaptcha too - only 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 -  see below - 

    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:

    See - https://form.jotform.com/52858618633971?

    It's not ideal, but Google are not willing to allow reCaptcha V2 be modified to misrepresent their branding - especially since its a ubiquitous web security feature. 

    Now - how did you want to modify reCaptcha? 

    Let us know - Thanks! 

  • Profile Image

    Answered by markashton on October 14, 2015 at 10:09 AM

    Great answer ... understood ... don't worry ... no reply required

    Thnak you

    Regards Mark

  • Profile Image

    Answered by Arsalan  on September 30, 2016 at 02:24 AM

    .rc-anchor-light {
    background: #fff;
    border: 0px;
    color: #000;
    }

    its not working... 
    if there is any alternative ?