Making Cloudflare Turnstile CAPTCHAs Work on Multiple Forms

Making Cloudflare Turnstile CAPTCHAs Work on Multiple Forms

🤯 Making Cloudflare Turnstile CAPTCHAs Work on Multiple Forms (Without Losing Your Mind)

Getting Cloudflare Turnstile CAPTCHAs working on a single form is easy.

Getting them to work reliably across multiple forms on the same page—especially when mixing AJAX and standard POST—is anything but.

I know, because I’ve been there. What should have taken an hour took a full day of debugging, testing, and praying to the gods of asynchronous JavaScript.

If only someone had done this for me already…
Good news: now I’ve done it for you.

🔹 The Problem

When you load multiple CAPTCHAs on one page:

  • Tokens collide.
  • Manual triggers break auto-execution.
  • AJAX forms and .NET POST forms fight over callbacks.
  • Forms submit prematurely or not at all.

Most guides just say "don't do that."

But real-world sites?

They need:

  • A contact modal (AJAX)
  • A subscribe form
  • A login form
  • A support ticket form

…all on the same page.

✅ The DevStack Solution: Clear Separation Strategy

We solved it by splitting the logic across scoped, isolated layers:

1. Separate Initialization per Form Type

  • AJAX forms (e.g. #contactForm) are manually initialized inside their own partial.
  • Regular forms use a layout-based script to init Turnstile only once per form.

$('form:not([data-ajax="true"])') // grabs regular forms only

2. Hidden Field & Callback Sync

Each form has:

  • A hidden input for the token.
  • A unique data-callback for when the token is ready.
  • JS logic to wait for the token before submit.

3. AJAX Form Flow (Manual)

In the modal:

  • Turnstile is executed only when Submit is clicked.
  • On success, the token is added to the field and the form is AJAX-posted.

turnstile.execute('my-widget-id');

🔒 Why It’s So Hard

Cloudflare's documentation assumes you’re only using one form.

But in the real world:

  • You’ll need separate lifecycles
  • You’ll hit race conditions
  • You'll battle token expiry
  • You'll need to prevent double submits

This took hours to debug and get stable across different environments, modals, layouts, and partial views.

🔧 The DevStack Advantage

If you’re using my DevStack, this is already baked in:

  • Multiple form support
  • Working token sync
  • Manual/AJAX compatible
  • Safe submit logic
  • Clear visual feedback
No hacks. No guesswork. Just a clean user experience.

And yes, you can see a working demo or get help implementing it—just contact me.

🚀 Want to Skip the Pain?

I'm not just offering code—I’m offering you experience.

From 40+ years in business to scalable tech built on 28+ years in dev, my job is to make your job easier.

Need help wiring Turnstile into your site, or want to go deeper with secure forms?

Let’s talk—it's probably already solved in DevStack.

📩 Book a quick chat or request DevStack access

uxsecurityfront-end