How to Add a CAPTCHA to Your Website (2026): Every Platform + a Zero-Code Method

your-site.com/contact

Contact us

Email Message How can you help me?

captcha goes here

Send message

Add fix×

Add Cloudflare Turnstile here|

Fix it → ↻ Done ✓

SimpleReview AI

Selected element

form#contact .captcha-slot

CAPTCHA placeholder

Add Turnstile CAPTCHA here

✓ PR #38 — Turnstile added

Hover the element · write "add captcha here" · click Fix it · get a real PR

What a CAPTCHA actually does

If a form writes to your database or sends an email, you need spam protection. Signup, login, password reset, comments, checkout, contact — all of them get hammered by bots within hours of going live. Adding a CAPTCHA is the most reliable way to prevent form spam without blocking real users. In 2024 Cloudflare reported nearly 50% of internet traffic was automated, and a sizeable share was malicious. Unprotected forms become spam engines, credential-stuffing targets, or SMTP-abuse launchpads.

Which CAPTCHA should you pick?

Method 1 — Point-and-click via Chrome extension (no code)

If you don't want to edit HTML, deal with site keys, or read a plugin changelog, you can add a CAPTCHA the same way you report a bug: click the form, describe the change, merge a pull request.

That is exactly what the SimpleReview Chrome extension does. The animated banner above is the real flow:

1. Open any page of your site.
2. Click the SimpleReview icon. A popup appears next to the element you clicked.
3. Type "Add Cloudflare Turnstile CAPTCHA to this form" and hit Fix with AI.
4. The extension sends the DOM snippet + your instruction to a background AI agent. A pull request lands in your repo within a few minutes.
5. A human reviewer on our side checks the diff (keys loaded from env vars, server-side verification wired in) before it reaches you.

This is the zero-code method. It works on HTML, React, Vue, Svelte, PHP — anything you can open in a browser and point at a GitHub repo.

Method 2 — Add CAPTCHA to a plain HTML form

If you prefer copy-paste, here's the shortest working path. We'll use Cloudflare Turnstile because it's the fastest in 2026.

Step 1: get a site key

Sign up at dash.cloudflare.com → Turnstile → Add site → copy the site key (public) and secret key (keep private).

Step 2: put the widget on the form

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<form action="/contact" method="POST">
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
  <button type="submit">Send</button>
</form>

Step 3: verify on the server (non-negotiable)

Client-side alone is useless — anyone with DevTools skips it. Your backend must POST the token to Cloudflare:

// Node / Express
app.post('/contact', async (req, res) => {
  const token = req.body['cf-turnstile-response'];
  const r = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `secret=${process.env.TURNSTILE_SECRET}&response=${token}&remoteip=${req.ip}`
  });
  const data = await r.json();
  if (!data.success) return res.status(403).send('Bot detected');
  // ...save message, send email...
});

The same pattern works for reCAPTCHA v2 (endpoint: https://www.google.com/recaptcha/api/siteverify) and hCaptcha (https://hcaptcha.com/siteverify).

Server-side in PHP

<?php
$token = $_POST['cf-turnstile-response'] ?? '';
$resp  = file_get_contents(
    'https://challenges.cloudflare.com/turnstile/v0/siteverify',
    false,
    stream_context_create(['http' => [
        'method'  => 'POST',
        'header'  => 'Content-Type: application/x-www-form-urlencoded',
        'content' => http_build_query([
            'secret'   => getenv('TURNSTILE_SECRET'),
            'response' => $token,
            'remoteip' => $_SERVER['REMOTE_ADDR'],
        ]),
    ]])
);
$data = json_decode($resp, true);
if (!$data['success']) {
    http_response_code(403);
    exit('Bot detected');
}
// ...save message, send email...

Method 3 — WordPress (Contact Form 7, WPForms, Elementor)

Never hand-patch WordPress theme files. Every CAPTCHA has an official plugin:

• Contact Form 7: install CF7 Simple Recaptcha or Advanced Google reCAPTCHA. Add your keys in Settings → Integration. Put [cfturnstile] or [recaptcha] inside your form tag.
• WPForms: go to WPForms → Settings → CAPTCHA, pick provider, paste keys, then drag the CAPTCHA field onto any form.
• Elementor Forms: Elementor Pro ships reCAPTCHA and hCaptcha fields natively. Add the field, paste keys in Elementor → Settings → Integrations.
• Gravity Forms: use the built-in CAPTCHA field; switch provider under Forms → Settings → reCAPTCHA / hCaptcha.
• WooCommerce: for checkout and registration use Advanced noCaptcha & invisible Captcha or Login No Captcha reCAPTCHA. Don't try to inject it manually — WooCommerce's checkout hook order is a minefield.
• Comments: Akismet first, CAPTCHA second. Most comment spam dies to Akismet alone.

Method 4 — Shopify, Webflow, Wix, Squarespace

Hosted platforms differ: some ship CAPTCHA built-in, some require a workaround.

• Shopify: the native contact form (contact_form Liquid tag) has bot protection on by default since 2022. For custom checkout fields, use an app like Captcha by POWR. Shopify Plus: you can add reCAPTCHA via checkout extensibility.
• Webflow: go to Project Settings → Forms → reCAPTCHA, paste site + secret key, done. Turnstile is not native yet — use a custom embed.
• Wix: only Wix Forms Pro supports CAPTCHA. Turn it on in form settings → Advanced → CAPTCHA.
• Squarespace: Business+ plans include built-in Google reCAPTCHA on contact and newsletter forms. Enable in Settings → Forms.

Other platforms: Drupal, Joomla, Magento, HubSpot, Mailchimp

• Drupal: install the CAPTCHA or reCAPTCHA module from drupal.org/project/captcha. Configure which forms are protected under Configuration → People → CAPTCHA.
• Joomla: enable CAPTCHA – ReCaptcha in Extensions → Plugin Manager, then select it in Global Configuration → Site → Default Captcha.
• Magento / Adobe Commerce: go to Stores → Configuration → Customers → Customer Configuration → CAPTCHA. Choose forms (login, registration, checkout) and provider.
• HubSpot forms: no native third-party CAPTCHA API, but HubSpot applies its own bot detection. For custom embeds on your own page, add Turnstile and validate before calling the HubSpot Forms API.
• Mailchimp signup forms: Mailchimp-hosted forms include reCAPTCHA automatically. For embedded forms, add Turnstile server-side before calling the Mailchimp API.

Method 5 — Google Forms

Google Forms does not expose a CAPTCHA field. Your options:

1. Built-in response validation — add a short-answer question with a regex (e.g. ^[A-Za-z ]{3,40}$). Weak, but filters the dumbest bots.
2. Require sign-in — Settings → Responses → Limit to 1 response / restrict to organization. Blocks 100% of anonymous bots, kills 30% of real submissions.
3. Embed your own form — build the page yourself, add Turnstile, POST to Google Apps Script. Most control, most work.

Method 6 — Cloudflare Turnstile (recommended default)

For any greenfield project in 2026, Turnstile is the lowest-friction pick. Reasons:

• No Google account — just Cloudflare, which you probably already use for DNS.
• No tracking cookies — easier GDPR story, no extra consent banner row.
• Managed mode auto-switches between invisible, non-interactive, and interactive challenges based on risk.
• Free and unlimited for all plans.

If you're on Cloudflare Pages or Workers, the sitekey can be injected as a binding — no env files needed.

Common problems and how to fix them

• "Invalid site key" — you pasted the secret key into the HTML. Secret key never leaves your server.
• CAPTCHA appears but form still lets bots through — you forgot server-side verification. The client token means nothing without siteverify.
• Token expired — Turnstile tokens live 300s, reCAPTCHA v2 tokens 120s. If your form takes longer (file upload, multi-step) request a fresh token right before submit.
• CORS error on verify call — call siteverify from your server, not from JS. It's a server-to-server endpoint.
• Double-render widget in React / Vue — call turnstile.render() in a useEffect cleanup, or use the official @marsidev/react-turnstile wrapper.
• Accessibility complaints — reCAPTCHA v2 audio challenge is notoriously poor. Turnstile has better a11y; invisible modes sidestep the issue entirely.

Testing your CAPTCHA

1. Use the provider's test keys in development — they always pass or always fail, predictable.
   • Turnstile always-pass site key: 1x00000000000000000000AA
   • reCAPTCHA always-pass site key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
2. Write an integration test that POSTs a submission without a token — it must 403.
3. Test on mobile Safari — several CAPTCHAs have historic issues with ITP / storage partitioning.

FAQ

Related reading

• 7 Security Risks in Vibe-Coded Apps (and what a CAPTCHA doesn't fix)
• Pre-launch Checklist for AI-Generated Apps
• Best Chrome Extensions for AI Code Review in 2026