Skip to main content
Add anti-bot protection to your Crunchforms forms using Cloudflare Turnstile. Crunchforms handles server-side token validation out of the box and will reject submissions that contain invalid tokens.

​
Why use Turnstile with Crunchforms

  • Turnstile provides a privacy-friendly CAPTCHA alternative from Cloudflare.
  • Because Crunchforms already handles server-side validation of the Turnstile token, you only need to embed the widget on the front end and configure your keys.
  • Once configured, any submission via Crunchforms that fails the Turnstile token validation will be rejected automatically — minimal extra code required.

​
Prerequisites

Before you start:
  • Read through Cloudflare’s Turnstile get started documentation to understand how it works and set up your widget and keys.
  • You must have a Cloudflare account and access to the Turnstile widget creation.
  • You must have a Crunchforms form set up (you already have a form-endpoint configured).
  • Access to edit the HTML (or embed) of your form page to add the Turnstile widget.

​
Step 1: Create your Turnstile widget (on Cloudflare)

Follow Cloudflare’s documentation for this part:
  1. Log in to your Cloudflare Dashboard → Navigate to the Turnstile section.
  2. Click Add Widget
  3. Provide a descriptive name, the domain(s) you will use it on.
  4. Choose a Widget mode (Managed / Non-Interactive / Invisible) based on your desired user-experience.
  5. Click Create — you will be shown Site Key (public) and Secret Key (private).
  6. (Optional) Adjust appearance, hostname restrictions, and other settings per Cloudflare’s guide.
Keep your secret key secure. Don’t expose it in client-side code on your website. The Secret key will be added to your form configuration in Crunchforms and will be used to validate submitted tokens.

​
Step 2: Configure Crunchforms to use your Turnstile key

In your Crunchforms dashboard, edit the form settings for the form you want to protect:
  1. Navigate to your dashboard
  2. Edit the form settings by selecting Edit Form Settings from the action dropdown next to the form you would like to edit, or from the submission view, click the button and select Edit Form Settings.
  3. Click on Advanced Setttings to expand the advanced options.
  4. Scroll to the bottom to find the Turnstile configuration section
  5. Enter your Secret Key for widget your created in Step 1 in the Cloudflare Turnstile Secret Key field.
  6. Save your changes.
If you have any value in the Cloudflare Turnstile Site Key field, Crunchforms will expect a token in your submissions and will attempt to validate it. If validation fails, the submission will be rejected. You can leave this field blank if you do not want to enforce Turnstile validation on this form.
With Crunchforms, you do not need to write any custom server-side code for token validation — Crunchforms will automatically validate the token using Cloudflare’s siteverify API and reject invalid/expired tokens. Tokens must be submitted along with the form data under the turnstileToken field name.

​
Step 3: Embed the Turnstile widget into your form page

Refer to Cloudflare’s Embed the Turnstile widget documentation for details. In summary:
  1. Load the Turnstile widget script (ideally placed in <head> or just prior to form). Example from Cloudflare: 
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
  2. Insert the widget markup inside your <form> element (before the submit button): 
    <div class="cf-turnstile"
     data-sitekey="YOUR_SITE_KEY"
     data-theme="auto"
     data-callback="onTurnstileSuccess"></div>
    Replace "YOUR_SITE_KEY" with the Site Key from your Cloudflare Turnstile widget created in Step 1.
  3. (Optional) Add a data-callback JS function to capture the token and optionally enable/disable submit button once a token is generated: 
    function onTurnstileSuccess(token) {
  document.getElementById("submit-button").disabled = false;
}
  4. Ensure your form’s submit button is present and optionally disabled until widget success, if using callback.
Because Crunchforms handles the server validation step, you just need the widget on the client side. You will need to send the token along with the form submission. When you embed a Turnstile widget inside a <form> element, an invisible input field with the name cf-turnstile-response is automatically created. This field contains the verification token and gets submitted with your other form data. Crunchforms automatically validates it before accepting the submission.

​
Testing your Turnstile integration

See Cloudflare’s Testing your Turnstile integration guide for details and dummy keys you can use for testing.

​
Turnstile Form Example

turnstile-form.html
<html>
	<head>
		<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
		<script>
			function onTurnstileSuccess(token) {
				document.getElementById("submit-button").disabled = false;
			}
		</script>
	</head>
	<body>
		<form 
			action="https://crunchforms.com/form/{formID}" 
			method="post"
		> 
			<label for="email">Please Enter Your Email</label> 
			<input name="email" type="email" id="email" /> 
			<div class="cf-turnstile"
				data-sitekey="YOUR_SITE_KEY"
				data-theme="auto"
				data-callback="onTurnstileSuccess">
			</div>
			<button id="submit-button" disabled type="submit">Submit</button> 
		</form>
	</body>
</html>

​
Use with Single Page Applications, React, and Next.JS

There are community-built Turnstile components for React and Next.JS that you can use to integrate Turnstile into your SPA or React-based frontend. These components handle loading the Turnstile script and rendering the widget in a React-friendly way. One great option is react-turnstile, which provides a simple React library for embedding Turnstile.

​
React Turnstile Example

TurnstileWidget.js
import Turnstile, { useTurnstile } from "react-turnstile";

function TurnstileWidget({enableSubmitCallback,siteKey,tokenCallback}) {
  const turnstile = useTurnstile();

  function onTurnstileSuccess(token) {
        // Callback that passes true to enable submit button once token is generated
		enableSubmitCallback(true);

		// Pass the token back to the parent component to include in form submission under 'turnstileToken' field or 'cf-turnstile-response' field
        tokenCallback(token);
    }
	
  	return (
        <Turnstile
            sitekey={siteKey}
            onVerify={(token) => onTurnstileSuccess(token)}
        />
    );
}
When using these components, ensure that the generated token is included in the form submission under the turnstileToken field name or the cf-turnstile-response field name so that Crunchforms can validate it server-side.

​
References

​
Next steps

Explore advanced configurations and features:

Set up a Honeypot Field

Get easy protection agains simple bots using a hidden field

Set up Cloudflare Turnstile

Advanced bot protectionion using Cloudflare Turnstile

Use Environments

Explore advanced methods using eviromenents to manage build, test, and protection forms

Add additional email addresses

Add and verify additional email addresses to receive form submission notifications

​
Need Help?

Get Support

Send us a note