Web3Forms
  • Introduction
  • Getting Started
    • Installation
    • Customizations
      • Email Subject line
      • Success / Thank You Page
      • Custom Redirection
      • Captcha & SPAM
        • hCaptcha
        • reCaptcha & Turnstile
        • Honeypot
        • Report Spam
      • Custom Reply-To
      • From Name
    • Pro Features
      • reCaptcha Integration
      • Cloudflare Turnstile Captcha
      • Add CC Email
      • Autoresponder (Auto-Reply)
      • File Attachments
      • Advanced File Uploader
      • Webhooks
      • Restrict to Domain
      • Intro Text
    • Examples
      • Basic HTML Contact Form
      • Advanced - All Options
      • Ajax Contact Form using Javascript
      • Multi Column Contact Form
      • Javascript Form Validation
      • Contact Form with Dark Mode
      • Raw Contact Form
      • Google reCaptcha v3
      • File Upload Form
      • With Multiple Checkbox
    • Integrations
      • Zapier
      • Integromat
      • Examples
        • Google Sheets
        • Airtable
        • Telegram Notifications
    • Options Reference
    • API Reference
    • Troubleshooting
    • FAQ
  • How-to Guides
    • HTML & JavaScript
    • JS Frameworks
      • React JS
        • Web3Forms React Plugin
        • React Hook Form
        • Simple React Contact Form
        • React File Upload Form
        • React Google ReCaptcha v3
        • React Hook Form File Upload
      • Vue JS
      • Svelte
      • Angular JS
      • Alpine.js
    • Site Builders
      • Webflow
      • Framer
      • Carrd.co
      • Squarespace
      • Wix
      • Dorik
    • Static Site Generators
      • Next.js
      • Astro
      • Nuxt.js
      • Hugo
      • Jekyll
      • Gatsby
      • Gridsome
      • Eleventy
    • Hosting Providers
      • Vercel
      • Netlify
      • Digital Ocean
      • AWS
      • Github
      • Cloudflare
    • JAM Stack
    • Landing Page Builders
      • Unbounce
      • Instapage
      • Pagewiz
      • Groovefunnels
    • WordPress
      • Elementor
      • Oxygen Builder
Powered by GitBook
On this page
  • Steps
  • 1. Create Turnstile Captcha Accounut
  • 2. Add the Turnstile Script to your website
  • 3. Render the widget inside your form
  • 4. Add Secret Keys to your Web3Forms Dashboard

Was this helpful?

Edit on Git
  1. Getting Started
  2. Pro Features

Cloudflare Turnstile Captcha

Web3Forms supports cloudflare turnstile captcha in our forms.

Codepen Demo: https://codepen.io/surjithctly/pen/ExdGwpE

Heads Up! This is a PRO feature. You must have an active subscription to use this feature.

Steps

1. Create Turnstile Captcha Accounut

  1. Log in to the Cloudflare dashboard and select your account.

  2. Go to Turnstile.

  3. In the widget overview, select Settings.

  4. Copy your sitekey and secret key.

2. Add the Turnstile Script to your website

To add the Turnstile script:

  1. Insert the Turnstile script snippet in your HTML’s <head> element:

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

3. Render the widget inside your form

To render the Turnstile widget in your form:

  1. Insert the below code inside your <form> tag. Make sure to change YOUR_SITE_KEY_HERE with the actual site key.

<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY_HERE" data-theme="light"></div>

4. Add Secret Keys to your Web3Forms Dashboard

  1. Visit the Web3Forms Dashboard and select your form.

  2. Open Settings and choose turnstile as your captcha provider

  3. Enter the Secret Key in the Textbox below

  4. Save Changes

That's it. Your form will automatically be protected with Cloudflare Captcha.

---

To read more detailed guide, visit the official docs here: https://developers.cloudflare.com/turnstile/get-started/

PreviousreCaptcha IntegrationNextAdd CC Email

Last updated 1 year ago

Was this helpful?