Turnstile
Turnstile, Cloudflare's intelligent CAPTCHA alternative, is seamlessly integrated with Formzillion.
Getting started
- Go to Turnstile (opens in a new tab).
- Create a new site.
- Integrate the site key on your website instructions (opens in a new tab).
- Copy the secret key.
- In your form's settings, Enable Spam Protection, select Turnstile under Spam Protection..
- 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>