Google ReCAPTCHA

Protect your form against spam and bots with Google 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://www.google.com/recaptcha/admin)
• Copy the script from the “Frontend integration” section to the tag of your website. Remember to replace reCAPTCHAsitekey 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 (the secret key and domain fields).

Copy this JavaScript from the reCAPTCHA 3 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). Of course make sure to paste in your own values instead of what we have below :)

<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/{your-unique-token}" 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/{your-unique-token}" 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.