Skip to main content

Stop Spam Using Google reCaptcha v2

reCAPTCHA reCAPTCHA is a free service from Google which protects your forms against spam and other types of automated abuse. Google's reCAPTCHA provides two versions, a checkbox and an "invisible" version (which is actually a badge which can, optionally, be hidden). StaticForms currently supports reCAPTCHA v2, with support for reCAPTCHA v3 coming soon.

Animation of Google reCAPTCHA in action

Create A New Form End-Point#

Let's start by creating a new form end-point in StaticForms.

Click the Create Form button the Dashboard then, on the New Form page, give your form a name and click Create.

img

Your form end-point will be created and the Form Settings page will appear. For now, we can leave everything set to the defaults, so we just need to make a note of the form end-point URL use later on.

img

Set up a Google reCaptcha account and add your site#

If you don't already have one, the first step is to create a Google reCAPTCHA account and add the website you want to protect. To do this, you need to go to the reCAPTCHA Admin Console and add your site, making sure to select reCAPTCHA v2 and the I'm not a robot" checkbox.

Image Google reCAPTCHA type selection interface

Get your reCaptcha keys#

Once you’ve done that, you’ll be redirected to a page showing your site key and secret key. We'll need these later.

Image of Google reCAPTCHA public and private keys

Create your form#

Next, create your form. We'll just build a very basic contact form for demonstration purposes. You can copy and paste the code below in to a new HTML file, replace {YOUR UNIQUE FORM END-POINT} with the URL of the StaticForms form end-point you created earlier.

<html>
<head></head>
<body>    <form action="{YOUR UNIQUE FORM END-POINT}" method="POST" id="contact-form">        <label for="email">Email address</label>        <input type="email" name="email" placeholder="[email protected]" required />
        <input type="submit" value="Submit">    </form></body>
</html>

Add reCaptcha#

Add the link to Google's reCaptcha script just before the closing head tag:


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

Then add a <div> with class="g-recaptcha" and a data attribute named data-site-key with its value set to the site key you created earlier when you registered the new site with Google reCapatcha.

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

Once you've done that, your page should look like this:

<html>
<head>    <script src="https://www.google.com/recaptcha/api.js" async defer></script></head>
<body>    <form action="{YOUR UNIQUE FORM END-POINT}" method="POST" id="contact-form">        <div class="g-recaptcha" data-sitekey="{YOUR SITE KEY}"></div>        <label for="email">Email address</label>        <input type="email" class="form-control" name="email" placeholder="[email protected]" required />
        <input type="submit" value="Submit">    </form></body>
</html>

Now, when a user accesses the web page, Google will inject the "I am not a robot" checkbox we saw earlier. Then, when the user submits the form, Google will determine whether it is likely to be spam and let StaticForms know, and we'll then mark that submission appropriately.