Skip to content

cloudflare-turnstile-captcha.md

Latest commit

 

History

History
55 lines (36 loc) · 2.19 KB

cloudflare-turnstile-captcha.md

File metadata and controls

55 lines (36 loc) · 2.19 KB
description
Web3Forms supports cloudflare turnstile captcha in our forms.

Cloudflare Turnstile Captcha

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

{% hint style="info" %} Heads Up! This is a PRO feature.
You must have an active subscription to use this feature. {% endhint %}

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: https://app.webforms.com&#x20;
  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/