Require recaptcha

Support
1

https://sfeb-test1.netlify.app/index-alt.html

How can I force the recaptcha field to be required in order to submit the firm?

At this time, if the recaptcha field is not checked, but all the other fields are, the page will attempt to submit the form, not complete the form submission (with no sign of success or error) and clear all the existing fields (this seems like a poor user experience)

2

hmm, seems like something isn’t set up quite correctly.

can you tell us more about your site? is it built with an SSG or straight up html?

3

@perry

the site is just static HTML from a Bootstrap template (no SSG)

the form works fine and the recaptcha is working fine (inserted by Netlify)

the problem is that you can submit the form without checking the captcha – in this case it won’t post to Netlify and it will delete the contents of the form – I need to make it do that the form won’t submit if recaptcha is not checked

4

I was able to find a simple solution using a browser alert window – not pretty, but effective

window.onload = function() {
  var recaptcha = document.forms["name-of-your-form-here"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {
    // do something
    alert("Please check the box, \"I'm not a robot\" in the reCaptcha below.");
  }
}
</script>
1 Like
5

Thanks for posting! I had the same issue but took a slightly different approach. This has the added benefit of showing the browser required message and allowing focus:

recaptcha.required = true;

  .g-recaptcha > div > div {
    position: relative;
    z-index: 1;
  }
  .g-recaptcha > div > textarea {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block !important;
    margin: 0 !important;
    border: none !important;
    height: auto !important;
    width: auto !important;
  }