D-Link

How to Fix the “Turnstile is Not Defined” Error

Written by

D-Link

in

How to Fix the “Turnstile is Not Defined” Error

If you’re encountering the “Turnstile is not defined” error on your website, you’re not alone. This common issue occurs when the Cloudflare Turnstile CAPTCHA JavaScript library hasn’t been properly loaded before you try to use it. Here’s a complete guide on why this happens and how to fix it.

What Is Cloudflare Turnstile?

Cloudflare Turnstile is a user-friendly CAPTCHA alternative that protects forms from bots without frustrating your users. It requires JavaScript to load a script that provides the global turnstile object.

Why You’re Seeing “Turnstile is not defined”

This error means that your site is trying to use the Turnstile API (e.g. calling turnstile.render()) before the Turnstile script has loaded and initialized. Common causes include:

  • Forgetting to include the Turnstile script.
  • The script is loaded too late (e.g. deferred incorrectly).
  • JavaScript errors elsewhere blocking it from loading.
  • You’re using a plugin or custom code that references Turnstile prematurely.

How to Fix It

1. Include the Turnstile Script in Your HTML

Make sure the following script tag is added before any code that uses Turnstile:

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

2. Ensure Your Code Waits for Turnstile to Load

If you’re using turnstile.render() or referencing Turnstile directly, make sure the script has loaded first. Use the onload callback or poll for readiness:

<script>
  function initTurnstile() {
    if (typeof turnstile !== 'undefined') {
      turnstile.render('#turnstile-widget', {
        sitekey: 'your-site-key'
      });
    } else {
      setTimeout(initTurnstile, 100);
    }
  }
  window.onload = initTurnstile;
</script>

3. Use the Official Turnstile HTML Widget

An easier and safer way is to use the built-in HTML widget, which renders automatically:

<div class="cf-turnstile" data-sitekey="your-site-key"></div>

4. Plugin or Theme Conflicts

If you’re using a WordPress plugin that adds Turnstile support (like Fluent Forms, WPForms, etc.), make sure:

  • You’re not adding the script manually if the plugin already does.
  • The plugin is up to date.
  • There are no JavaScript errors in the console (check via your browser’s developer tools).

5. Check the Order of Script Execution

If using custom themes, make sure any code calling turnstile appears after the Turnstile script and after the DOM is fully loaded.

6. Using a JavaScript Framework? Load Dynamically

If you’re using React, Vue, or similar, dynamically load the Turnstile script before rendering:


const script = document.createElement("script");
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
script.async = true;
script.defer = true;
document.head.appendChild(script);
script.onload = () => {
  if (window.turnstile) {
    window.turnstile.render("#turnstile-widget", {
      sitekey: "your-site-key"
    });
  }
};

Final Thoughts

The “Turnstile is not defined” error is usually caused by loading order issues. The safest solution is to either use the HTML widget or ensure that your JavaScript logic only runs after the Turnstile script is fully loaded. Test thoroughly and check the browser console for any related issues.

More posts