Set up Cloudflare Turnstile

Invisible, privacy-first verification by Cloudflare. No puzzles for your users.

What is Turnstile?

Cloudflare Turnstile is a modern alternative to traditional captchas. Unlike reCAPTCHA or hCaptcha, Turnstile never shows image puzzles. In most cases, the verification happens completely in the background — users do not see or interact with anything. When extra verification is needed, Turnstile shows a compact, non-interactive spinner widget that resolves automatically.

Turnstile does not use tracking cookies, does not fingerprint users for advertising, and does not require a Cloudflare account for your website's DNS. It is completely free with no usage limits.

Why Turnstile is different

Widget modes

When you create a Turnstile widget in the Cloudflare dashboard, you choose one of three modes:

ModeWhat the user seesBest for
ManagedUsually nothing. Cloudflare may show a brief spinner if extra checks are needed.Most forms — recommended default
Non-interactiveA small widget appears but requires no interaction. It resolves on its own.Forms where you want a visible "verifying" indicator
InvisibleNothing at all. The entire process runs in the background with no visual element.Maximum UX — zero visual footprint
Tip: Start with Managed mode. It provides the best balance between security and UX. Cloudflare decides on a per-visitor basis whether any visual element is needed, so most users see nothing at all.

Step 1: Get your keys from Cloudflare

  1. Log in to the Cloudflare dashboard. Create a free account if you do not have one.
  2. In the left sidebar, click Turnstile.
  3. Click Add site.
  4. Enter a name for the widget (e.g., "Contact Form").
  5. Add your domain(s) under Allowed domains:
    • Your own domain (e.g., yoursite.com)
    • formblade.com if you use the hosted form page
  6. Choose a widget mode (Managed, Non-interactive, or Invisible).
  7. Click Create.
  8. Copy the Site Key and Secret Key.
Tip: Cloudflare provides test keys for development. Use site key 1x00000000000000000000AA (always passes) or 2x00000000000000000000AB (always blocks) with secret key 1x0000000000000000000000000000000AA (always passes).

Step 2: Add keys in FormBlade

  1. Open your form in the FormBlade dashboard.
  2. Go to the Settings tab.
  3. Scroll down to the Captcha section.
  4. Select Cloudflare Turnstile from the dropdown.
  5. Paste your Site Key into the Site Key field.
  6. Paste your Secret Key into the Secret Key field.
  7. Click Save.

If you use a hosted form, the Turnstile widget is added automatically. If you use a custom HTML form, you need to add the widget code yourself (see below).

Add Turnstile to a custom HTML form

If you are not using a hosted form, add the Turnstile script and widget div to your page:

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

<form action="https://formblade.com/f/contact" method="POST">
  <label>Name</label>
  <input type="text" name="name" required>

  <label>Email</label>
  <input type="email" name="email" required>

  <label>Message</label>
  <textarea name="message" required></textarea>

  <!-- Turnstile widget -->
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

  <button type="submit">Send</button>
</form>

Replace /f/contact with your own form link from the dashboard.

Replace YOUR_SITE_KEY with your actual site key from the Cloudflare dashboard. The widget renders automatically. Depending on the mode you chose, users may see a brief spinner or nothing at all. When verification completes, a hidden cf-turnstile-response field is injected into the form. FormBlade verifies this token server-side using your Secret Key.

AJAX submission with Turnstile

If you submit your form with JavaScript, the Turnstile token is included in the FormData automatically:

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

<form id="myForm" action="https://formblade.com/f/contact" method="POST">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const res = await fetch(this.action, {
    method: 'POST',
    body: new FormData(this),
  });
  if (res.ok) {
    this.innerHTML = '<p>Thank you!</p>';
  }
});
</script>

Replace /f/contact with your own form link from the dashboard.

Invisible mode without a widget div

If you chose the Invisible mode and want to remove the widget div entirely, you can invoke Turnstile programmatically:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>

<form id="myForm" action="https://formblade.com/f/contact" method="POST">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <input type="hidden" name="cf-turnstile-response" id="turnstileToken">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  var form = this;
  turnstile.render('#myForm', {
    sitekey: 'YOUR_SITE_KEY',
    callback: function(token) {
      document.getElementById('turnstileToken').value = token;
      form.submit();
    },
  });
});
</script>

Replace /f/contact with your own form link from the dashboard.

This gives you complete control over when verification runs. The widget never appears on the page.

Tips

Troubleshooting

Widget not appearing

If the Turnstile widget does not render (and you are not using Invisible mode):

Verification failing on submit

If submissions are rejected with a captcha error:

Widget showing when it should be invisible

In Managed mode, Cloudflare may occasionally show a brief spinner to visitors it cannot verify silently. This is expected behavior. If you want no visible element at all, switch to Invisible mode in the Cloudflare dashboard.