reCAPTCHA 2.0 not appearing in Safari (works in Edge, Chrome, and Firefox)
I just integrated the Google reCAPTCHA 2.0 into my site. It works as expected in Chrome, Firefox, and Edge, but it doesn't work / appear in Safari on my MacBook Pro.
- MacBook Pro: macOS Sierra version 10.12.2.
- Safari: Version 10.0.2 (12602.3.12.0.1)
The reCAPTCHA is being used within a dhtmlXForm like this...
...
{ type:"label", name:"myrecaptcha", label:"<div class=\"g-recaptcha\" data-sitekey=\"MY_KEY_HERE\"></div>", offsetLeft:320 },
...
Which in all browsers except for Safari generates this...
But in Safari it doesn't appear...
There are no errors in the console. I have cleared all browser cache. The location of the api.js line is immediately before the closing </head> tag like Google's documentation says. Not sure what else to try.
UPDATE: In Safari when I inspect the area where the reCAPTCHA is supposed to show I only see the original <div class="g-recaptcha" data-sitekey="MY_KEY_HERE"></div> with nothing in it. So it's not putting the iframe into that div for some reason. Hope that helps.
UPDATE: I went back and implemented reCAPTCHA v2 today (3.5 years later) and it appears to work in Safari now.
Answer
1. $('#captcha-form script').remove();
'captcha-form' is the id of the form containing the captcha. Remove the script tags so the scripts don't get executed a second time when Safari re-renders them after jQuery moves them. The event handlers created by the script aren't in the script tags, so they survive.
2. Set the links in The reCAPTCHA config file from http to https
I just recalled that I had also turned on "Use HTML5 in forms" in the Formidable General settings recently. If I uncheck that, the reCAPTCHA works on Safari.
So, this would indicate that there is a problem with your implementation of HTML5 in forms, maybe that only surfaces when the site uses HTTPS.
3. Refer to these links provided below for more details -