How to Add reCAPTCHA to Your Form

Register your site with Google reCAPTCHA

Go to the Google reCAPTCHA admin console and register your domain. Choose reCAPTCHA v2 (checkbox) for a visible challenge or v3 (invisible) for a frictionless experience. Google gives you a site key (for the frontend) and a secret key (for server-side verification).

Add the reCAPTCHA widget to your form

Load the reCAPTCHA script and place the widget inside your form. For v2, add a div with the g-recaptcha class. For v3, the script runs invisibly and attaches a token to your form automatically. The token is sent along with the rest of your form data.

<!-- reCAPTCHA v2 (checkbox) -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form action="https://formslist.com/f/YOUR_FORM_HASH" method="POST">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>

  <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>

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

Add reCAPTCHA v3 for invisible protection

If you prefer a frictionless user experience, use reCAPTCHA v3 instead. It scores each visitor from 0.0 (bot) to 1.0 (human) without showing a challenge. The token is generated on form submit and sent to your backend or form endpoint for verification.

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

<form id="contactForm" action="https://formslist.com/f/YOUR_FORM_HASH" method="POST">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <input type="hidden" name="g-recaptcha-response" id="recaptchaToken" />
  <button type="submit">Send</button>
</form>

<script>
  document.getElementById("contactForm").addEventListener("submit", function (e) {
    e.preventDefault();
    grecaptcha.ready(function () {
      grecaptcha.execute("YOUR_RECAPTCHA_SITE_KEY", { action: "submit" }).then(function (token) {
        document.getElementById("recaptchaToken").value = token;
        e.target.submit();
      });
    });
  });
</script>

Verify the token and test

FormsList can verify reCAPTCHA tokens automatically when you add your secret key in the dashboard. Alternatively, you can verify tokens on your own server by sending them to Google's siteverify API. Test by submitting the form normally and by disabling JavaScript to confirm that bot submissions are blocked.