reCAPTCHA v2

Google reCAPTCHA is a security service provided by Google that helps protect websites and online platforms from automated spam, abuse, and malicious activities. reCAPTCHA offers two versions: clickable reCAPTCHA (v2) and invisible reCAPTCHA (v3), both of which we fully support.

In reCAPTCHA v2, users are typically asked to select specific images or solve puzzles to prove their human identity. This version is widely used and known for its I'm not a robot checkbox.

To integrate Google reCAPTCHA v2 into your form endpoint, follow these steps:

Setting up reCAPTCHA v2

Step 1 - Get API Keys

To begin, obtain an API key from the Google reCAPTCHA console by clicking here (opens in a new tab). You will need to log in using your Google Account credentials.

Once you have logged in to the Google reCAPTCHA Console, proceed by creating a new site. Choose the reCAPTCHA v2 option and proceed to add the domains associated with your website.

reCAPTCHA-v2-setup

Step 2- Add reCAPTCHA Library

There are 2 keys generated for you Site Key and Secret Key.

recaptcha-creds

Add reCAPTCHA library into your <head/> tags.

<script src="https://www.google.com/recaptcha/api.js"></script>

Step 3 - Add Hidden Element

Add hidden reCAPTCHA <input/> into your form.

<div class="g-recaptcha" data-sitekey="YOUR reCAPTCHA SITE KEY"></div>

Example

<html lang="en">
  <head>
    <title>FormZillion -reCAPTCHA v2 Spam Protection</title>
    <script src="https://www.google.com/recaptcha/api.js"></script>
  </head>
  <body>
    <form action="http://app.formzillion.com/f/{form_id}" method="post">
      <h1 >Formzillion HTML Form Example</h1>
      <label for="exampleInputEmail1">Email address</label>
      <input id="exampleInputEmail1" type="email" name="email" placeholder="Enter email" required="" />
      <label for="exampleInputName">Name</label>
      <input id="exampleInputName" type="text" name="name" placeholder="Enter your name" required="" />
      <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="enableBtn"></div>
      <button type="submit" id="submit-btn" disabled>Send</button>
      <script>
        function enableBtn() {
          document.getElementById("submit-btn").disabled = false;
        }
        document.getElementById("submit-btn").disabled = true;
      </script>
    </form>
  </body>
</html>

Step 4 - Setup Spam Protection for your Form

In order to add your Secret Key follow the below steps:

Login to your Formzillion App (opens in a new tab).
Select your particular form to which the spam protection need to be enabled.
Navigate to form's settings, select Spam Filtering in the sidebar. Select the Google reCAPTCHA v2 from the dropdown and add a secret key.
Paste the secret key into the Google reCAPTCHA v2 secret key field.

Your form is now protected by reCAPTCHA.

To stop using reCAPTCHA, change your Spam Protection to none.

ℹ️

Info: reCAPTCHA-v2 is available on Standard, Premium and Agency plans. (opens in a new tab)

Spam Protection reCAPTCHA v3