Using Google ReCAPTCHA v3

If for some reason our spam protection doesn't catch everything, it can be a good idea to make use of Google's ReCAPTCHA.

You'll first need to create a key on Google's site. This can be done here https://developers.google.com/recaptcha/docs/v3

These are the required steps for you to set this up:

• Create a reCaptcha site key for v3 of reCaptcha (can be done here: https://g.co/recaptcha/v3)

• Copy the script from the "Frontend integration" section to the tag of your website. Remember to replace reCAPTCHA_site_key in the two places it's listed with the actual key that you created

• Update the settings for your given form (the "Settings"-tab) with the reCaptcha secret-key and the domain on which the form is hosted - Add a g-recaptcha-response hidden field to your actual form.

Create a reCaptcha site key

First create a new key, enter the domain your site will be hosted on as well as a descriptive name of the key

That'll give you a site key and a secret key as seen in the screenshot below

Now login to FormBackend and go to the form you want to enable reCaptcha for and fill in the details on the "Settings"-tab:

Take this javascript snippet from the reCaptcha v3 documentation

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

And replace reCAPTCHA_site_key with the value you got when you created the new reCaptcha, so it looks like this (notice there are two places you need to replace it)

<script src="https://www.google.com/recaptcha/api.js?render=6LcRY5EUAAAAAJPnJ3F_9mJsnJanz3_947ZAZwH8"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('6LcRY5EUAAAAAJPnJ3F_9mJsnJanz3_947ZAZwH8', {action: 'formbackend_frontpage'}).then(function(token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Then the last step is to add a hidden field to your form with the name and id g-recaptcha-response, so the following form

<form accept-charset="UTF-8" action="https://www.formbackend.com/f/k-dv-zj5" method="POST">
  <label for="name">Name</labe>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

Looks like this with the hidden field added

<form accept-charset="UTF-8" action="https://www.formbackend.com/f/k-dv-zj5" method="POST">
  <label for="name">Name</labe>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

    <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">

  <button type="submit">Submit</button>
</form>

That's it! Your submissions will now be checked against Google's reCAPTCHA.