# How to implement a captcha system in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Add Google reCAPTCHA to your Bubble app to protect forms from bots and spam submissions. This tutorial covers installing the reCAPTCHA plugin, placing the element on signup and login forms, verifying the response in workflows, and choosing between v2 checkbox and v3 invisible modes.

## Overview: CAPTCHA in Bubble

CAPTCHA prevents automated bots from submitting forms, creating fake accounts, and spamming your app. This tutorial integrates Google reCAPTCHA with Bubble forms for signup, login, and contact pages.

## Before you start

- A Bubble account with an app
- A Google account for reCAPTCHA keys
- A form that needs bot protection

## Step-by-step guide

### 1. Get Google reCAPTCHA keys

Go to google.com/recaptcha/admin. Click '+' to register a new site. Enter a label, select reCAPTCHA v2 (checkbox) or v3 (invisible), and add your Bubble domain (yourapp.bubbleapps.io and any custom domains). Submit to get your Site Key and Secret Key.

**Expected result:** Site Key and Secret Key are generated for your domain.

### 2. Install the reCAPTCHA plugin

In Bubble, go to Plugins → Add plugins → search 'reCAPTCHA.' Install the Google reCAPTCHA plugin. In plugin settings, paste your Site Key and Secret Key into the corresponding fields.

**Expected result:** The reCAPTCHA plugin is configured with your keys.

### 3. Place the CAPTCHA element on your form

Go to the Design tab on your signup or contact page. Click '+' and search for the reCAPTCHA element. Drag it onto your form, positioned above the Submit button. For v2, it displays a checkbox with 'I am not a robot.' For v3, it is invisible and scores user behavior automatically.

> Pro tip: For v3 invisible mode, add the element but it will not display visually — verification happens silently in the background.

**Expected result:** The reCAPTCHA element appears on the form (v2) or is embedded invisibly (v3).

### 4. Verify CAPTCHA on form submission

Edit the Submit button workflow. Add an 'Only when' condition on the workflow: reCAPTCHA element's value is not empty (for v2) or reCAPTCHA element's score > 0.5 (for v3). If the condition fails, the workflow does not run, blocking bot submissions. Optionally show an alert: 'Please complete the CAPTCHA verification.'

**Expected result:** Form submission is blocked unless the user passes the CAPTCHA verification.

### 5. Reset CAPTCHA after failed or successful submission

After a successful form submission (or after showing a validation error), add a workflow action to reset the reCAPTCHA element. This clears the verification state so the user must verify again for the next submission. Use the 'Reset a reCAPTCHA' action from the plugin.

**Expected result:** The CAPTCHA resets after each form submission attempt.

## Complete code example

File: `Workflow summary`

```text
CAPTCHA SYSTEM — SETUP SUMMARY
================================

GOOGLE RECAPTCHA:
  Register at google.com/recaptcha/admin
  v2 (checkbox): visible, user clicks 'I am not a robot'
  v3 (invisible): no UI, scores behavior 0.0-1.0

BUBBLE PLUGIN:
  Google reCAPTCHA plugin
  Site Key + Secret Key in plugin settings

PAGE SETUP:
  reCAPTCHA element placed on form, above Submit button

WORKFLOW:
  Event: When Submit button is clicked
  Only when: reCAPTCHA's value is not empty (v2)
          OR reCAPTCHA's score > 0.5 (v3)
  Actions: form submission logic
  After submit: Reset reCAPTCHA element

FALLBACK:
  If CAPTCHA not completed → show alert message
  Do not proceed with form submission
```

## Common mistakes

- **Not adding the custom domain to reCAPTCHA settings** — reCAPTCHA only works on registered domains — your custom domain returns errors if not listed Fix: Add both yourapp.bubbleapps.io AND your custom domain in Google reCAPTCHA admin
- **Setting the v3 score threshold too high** — A threshold above 0.7 blocks many legitimate users, especially on mobile Fix: Start with 0.5 and adjust based on actual spam rates in your app
- **Forgetting to reset the CAPTCHA after submission** — Users cannot submit the form again because the CAPTCHA is still in 'verified' state Fix: Add a Reset reCAPTCHA action after each form submission workflow

## Best practices

- Register all your domains (including bubbleapps.io and custom) in Google reCAPTCHA admin
- Use v2 checkbox for high-value forms (signup, payment) and v3 invisible for low-friction forms (search, newsletter)
- Set v3 threshold at 0.5 initially and adjust based on spam patterns
- Reset the CAPTCHA element after every form submission
- Test CAPTCHA in development using Google's test keys before switching to production keys
- Combine CAPTCHA with rate-limiting workflows for layered protection

## Frequently asked questions

### Is Google reCAPTCHA free?

Yes. reCAPTCHA v2 and v3 are free for up to 1 million assessments per month. Enterprise pricing applies above that.

### Should I use v2 or v3?

Use v2 checkbox for high-security forms (signup, payment). Use v3 invisible for low-friction forms where you want to minimize user interruption.

### Does CAPTCHA work on mobile?

Yes. reCAPTCHA v2 shows a mobile-friendly checkbox, and v3 works invisibly on all devices.

### Can bots still bypass reCAPTCHA?

Sophisticated bots can solve CAPTCHAs. Layer reCAPTCHA with rate limiting and honeypot fields for better protection.

### Can I customize the CAPTCHA appearance?

v2 offers light and dark themes. v3 is invisible so there is nothing to customize visually.

### Can RapidDev help secure my Bubble app?

Yes. RapidDev implements comprehensive security measures including CAPTCHA, rate limiting, privacy rules, and security audits.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/implement-a-captcha-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/implement-a-captcha-system-in-bubble