Google reCaptcha - how do I make it so that the user can't click a button unless the reCaptcha is submitted?

Viewed 302

I've been trying to add a recaptcha to my website and I've added the widget but here's the problem - the user can click the submit button before finishing the recaptcha and that just defeats the whole purpose of having a recaptcha at all.

How can I make the button appear only when the reCaptcha is finished?

Screenshots are attached, thanks in advance

    <h1 style="font-family: sans-serif">Shorten a URL!</h1>
    <form action="/shortenurl" method="POST">
      <input type="text" name="url" placeholder="URL..."/>
      <iframe title="reCAPTCHA" src="boring recaptcha" role="presentation" name="a-3dswbffhbuei" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" width="304" height="78" frameborder="0"></iframe>
      <input id="sm" type="submit" value="Shorten URL!" />
    </form>
    </div>

enter image description here

1 Answers

just add the required attribute in input tag

<input type="text" name="url" placeholder="URL..." required/>

Related