Skip to content
Cloudflare Docs
DirectoryAPISDKsChangelog

Protect your forms

Last reviewed: 12 months ago

This tutorial will guide you through integrating Cloudflare Turnstile to protect your web forms, such as login, signup, or contact forms. Learn how to implement the Turnstile widget on the client side and verify the Turnstile token via the Siteverify API on the server side.

Before you begin

  • You must have a Cloudflare account.
  • You must have a web application with a form you want to protect.
  • You must have basic knowledge of HTML and your server-side language of choice, such as Node.js or Python.

Get Your Turnstile sitekey and secret key

  1. In the Cloudflare dashboard, go to the Turnstile page. Go to Turnstile
  2. Create a new Turnstile widget.
  3. Copy the sitekey and the secret key to use in the next step.

Add the Turnstile widget to your HTML form

  1. Add the Turnstile widget to your form.
  2. Replace <YOUR-SITE-KEY> with the sitekey from Cloudflare.
  3. Add a data-callback attribute to the Turnstile widget div. This JavaScript function will be called when the challenge is successful.
  4. Ensure your submit button is initially disabled.
Example
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Contact Form</title>
    <script
      src="https://challenges.cloudflare.com/turnstile/v0/api.js"
      async
      defer
    ></script>
    <script>
      function enableSubmit() {
        document.getElementById("submit-button").disabled = false;
      }
    </script>
  </head>
  <body>
    <form id="contact-form" action="/submit" method="POST">
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required></textarea>


      <!-- Turnstile widget -->
      <div
        class="cf-turnstile"
        data-sitekey="<YOUR-SITE-KEY>"
        data-callback="enableSubmit"
      ></div>


      <button type="submit" id="submit-button" disabled>Submit</button>
    </form>
  </body>
</html>