Hosting your own reCAPTCHA for your static form

Why use a captcha?

Captchas were invented to prevent bots or machines from quickly filling in forms on the internet. Without a captcha somewhere in your submission flow, it’s very easy for bots and spammers to send your marketing messages. Thus captchas were born. A way to distinguish humans from machines. Of course it does not prevent all kinds of spamming, and some bots can even solve certain captchas. But overall it greatly reduces the amount of spam your form will receive.

Why reCAPTCHA?

There are a number of captcha techniques available that work quite well. reCAPTCHA is Google’s advanced captcha system. It has some advantages and disadvantages over other captcha systems. In general it’s highly effective, and it is one of the three captcha providers we support, next to Cloudflare Turnstile and hCaptcha. You pick the provider per form, under “Spam-protection provider” on your form’s settings page, so the steps below apply to the forms you set to reCAPTCHA.

Why host your reCAPTCHA?

By default, your Un-static Form is using our servers to host your captcha, on our own keys, so there is nothing for you to set up. This is great for most use cases.

There are some use cases where we require you to host your own reCAPTCHA. For instance when you are using an ajax form on your static site’s form.

Steps to set up reCAPTCHA hosting

The most important steps for hosting your own reCAPTCHA is by setting it up correctly within Google’s systems. After that it’s only a single setting on your form to enable hosting your own captcha!

Let’s walk through the steps to set this up:

Step 1. Make sure your form endpoint is linked to an Un-static account, or link it now from your forms admin page.

Step 2. If you don’t have a secret yet, generate a new reCAPTCHA secret from Google reCAPTCHA

• Step 2a. Click the plus at the top right of the Admin Console
• Step 2b. Select reCAPTCHA v2
• Step 2c. Add your own domain of your site

Step 3. Copy your reCAPTCHA Secret Key from the site’s Settings

Step 4. In you form’s admin page, set your site’s reCAPTCHA secret (or disable reCAPTCHA verification altogether).

Step 5. Add the reCAPTCHA field to your page or form

<div class="form-group row">
  <div class="col-sm-9">
    <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY_HERE">
    </div>
  </div>
</div>

Step 6. Include the reCAPTCHA javascript file in your header just before </head>

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

And that should be it.

Using Turnstile or hCaptcha instead

Steps 1 to 4 are the same for the other two providers, only the widget you embed differs. Pick Cloudflare Turnstile or hCaptcha on your form’s settings page, create a secret with that provider, store it on your form, and send its token along with the submission: cf-turnstile-response for Turnstile and h-captcha-response for hCaptcha, instead of g-recaptcha-response.

Turnstile replaces steps 5 and 6 with:

<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

And hCaptcha with:

<div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

If you also store the matching public site key on your form, we keep showing our protection page after a normal submit, using your keys.

Let us know if you run into any issues!