I'm working on SP 2013 on premise. I have a site collection, I created a simple form in a page asking for user input details like First Name, Last Name and Email address and also added recaptcha in the end. I wrote this HTML in a content editor web part since server side dev is not an option and I can only work using Client side object model.
However when I enter only the id, class and data-sitekey inside a div for the captcha block, I see that on clicking the ok button of the web part, there is no captcha widget. However, on clicking the save button an iframe gets added in the html with a very big src, as a result of which captcha is getting displayed.
The problem I have now is on the first few times after refreshing the page the captcha works fine, but if I login to the same page after an hour's time and click on the captcha check box, it doesn't get selected (it just loads and the captcha widget again appears for re-selection) as a result of which the user is not able to submit the form.
Also I want the captcha widget to appear from a div element and not from an iframe.
Any idea if anyone has encountered this issue before. I am adding the iframe code below. Please suggest.
<div class="g-recaptcha" id="g-recaptcha" data-sitekey="6Lf-kyQUAAAAAErojGaGgxajhPS4qGKUBTNs8Ikf" style="min-height: 75px;"> <div style="width: 304px; height: 78px;"> <div> <iframe width="304" height="78" role="presentation" src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6Lf-kyQUAAAAAErojGaGgxajhPS4qGKUBTNs8Ikf&co=aHR0cDovL2Ftc3NwczAwMnF2OjM1OTMx&hl=en&v=v1531759913576&size=normal&cb=bszv5qwydh27" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation"></iframe> </div> <textarea name="g-recaptcha-response" class="g-recaptcha-response" id="g-recaptcha-response" style="margin: 10px 25px; padding: 0px; border: 1px solid #c1c1c1; width: 250px; height: 40px; display: none; resize: none;"></textarea></div> </div>