JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
How To Edit CSS Of Google ReCaptchaAsked 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:
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.
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.
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.
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?
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.
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:
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!
Great answer ... understood ... don't worry ... no reply required
To make the reCAPTCHA widget display a different theme, you first need to add the following code in your main HTML page anywhere before the <form> element where reCAPTCHA appears (this will not work if placed after the main script where reCAPTCHA is first invoked):