Breadcrumbs

Using Google reCAPTCHA

Add Google reCAPTCHA to a public form to discourage automated submissions. Users see the familiar "I'm not a robot" checkbox and must complete it before they can submit.

Before you begin

Step 1: Allow Google reCAPTCHA in the security headers

GlobalForms only loads scripts and frames from approved sites. Add Google's reCAPTCHA addresses to the Content Security Policy in config\local.json:

  • Add https://www.google.com https://www.gstatic.com to script-src.

  • Add a frame-src 'self' https://www.google.com; entry.

Start from the full default policy and change only these parts. See Security Headers. Restart the GlobalForms service afterwards.

Step 2: Add reCAPTCHA to your form

Import the example form, or copy its three components into your own form:

Component in the example

Purpose

reCaptcha Script (HTML Element)

Loads Google's reCAPTCHA script

is reCaptcha Verified (hidden Text Field)

Records when the user completes the check. The form can't be submitted until it is set.

reCAPTCHA checkbox (HTML Element)

Shows the checkbox and handles Google's response. Enter your site key here.

Step 3: Test

  1. Open the form in a private browser window.

  2. Confirm the reCAPTCHA checkbox appears and that the form can't be submitted until it is completed.

  3. Complete the check and submit.

The Google reCAPTCHA admin console shows usage statistics, usually after a delay.

Troubleshooting

Symptom

Cause and fix

The checkbox does not appear

The security headers are blocking Google. Check the browser console (F12) for Content Security Policy messages and complete Step 1.

"Invalid domain for site key"

Add your GlobalForms host name to the site's domains in the reCAPTCHA admin console.

The form submits without completing reCAPTCHA

Check that the hidden verification field is required and that your site key is in the checkbox component.