Turnstile

Turnstile, Cloudflare's intelligent CAPTCHA alternative, is seamlessly integrated with Formzillion.

Getting started

  1. Go to Turnstile (opens in a new tab).
  2. Create a new site.
  3. Integrate the site key on your website instructions (opens in a new tab).
  4. Copy the secret key.
  5. In your form's settings, Enable Spam Protection, select Turnstile under Spam Protection..
  6. Paste the secret key into the Turnstile secret key field.

Your form is now protected by Turnstile.

If you wish to discontinue using Turnstile, simply disable your Spam Protection in setting.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FormZillion - Turnstile Form Submit Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script
      src="https://challenges.cloudflare.com/turnstile/v0/api.js"
      async
      defer
    ></script>
  </head>
  <body>
    <div class="mx-auto flex h-[100vh] max-w-7xl items-center justify-center">
      <div class="w-[400px] border border-gray-100 px-10 py-8 shadow">
        <div class="flex justify-center">
          <img
            src="https://cdn-icons-png.flaticon.com/512/5087/5087579.png"
            alt="email"
            class="h-20 w-20"
          />
        </div>
        <h1 class="text-center text-3xl text-gray-700">Login</h1>
        <h4 class="text-center text-base text-gray-500">
          Safely Access Your Online Account or System with Login
        </h4>
        <form
          id="form"
          class="my-6"
          action="https://www.formzillion.com/f/your-form-id"
          method="POST"
        >
          <label
            class="mb-2 block text-sm font-bold text-gray-500"
            for="username"
          >
            User Name
          </label>
          <input
            class="focus:shadow-outline mb-4 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
            id="username"
            type="username"
            placeholder="Enter User Name"
            required
            name="username"
          />
          <label
            class="mb-2 block text-sm font-bold text-gray-500"
            for="username"
          >
            Password
          </label>
          <input
            class="focus:shadow-outline mb-4 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
            id="password"
            type="password"
            placeholder="Enter your password"
            required
            name="password"
          />
          <div class="cf-turnstile" data-sitekey="Your site key"></div>
          <div class="w-full">
            <button
              id="button"
              class="mt-4 w-full rounded bg-orange-500 px-4 py-2 font-bold text-white"
              type="submit"
            >
              Login
            </button>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>