How to add Cloudflare Turnstile to WordPress Forms

If you’re looking to add an extra layer of security to your WordPress site, Cloudflare’s brand-new “Turnstile” service is an impressive user-friendly, privacy-preserving alternative to Google reCAPTCHA.

In this article, we’ll show you how to add Cloudflare Turnstile to all your WordPress website forms!

Get Your Cloudflare Keys

First, create a Cloudflare account at: https://dash.cloudflare.com/sign-up

Once your account is created, visit the Cloudflare Dashboard, select “Turnstile” in the menu sidebar, and click “Add site”.

Cloudflare Turnstile - Dashboard

Next, you’ll be required to enter a site name, domain, and select the widget type.

  • Managed (Recommended): Cloudflare will use information from the visitor to decide if an interactive challenge should be used. If it does show an interaction, the user will be prompted to check a box (no images or text to decipher).
  • Non-interactive: A purely non-interactive challenge. Users will see a widget with a loading bar while the browser challenge is run.
  • Invisible: Challenge that does not require interaction.
Cloudflare Turnstile - Add Site

Click the “Create” button, and you will be given a “Site Key”, and “Secret Key”. Keep this page open, as you will need to copy them later.

Install The WordPress Plugin

Now you will want to go ahead and install the “Simple Cloudflare Turnstile” plugin on your website.

To do this, go to “Plugins > Add New” in your WordPress admin area, then search for “Simple Cloudflare Turnstile”, click “Install”, and finally click the “Activate” button that shows once it’s installed.

Cloudflare Turnstile - Install WordPress Plugin

You will then be taken to the settings page for Simple Cloudflare Turnstile.

Here you will be able to customise several options:

  • Site Key and Secret Key.
  • Widget Theme (light or dark).
  • Widget Language.
  • Appearance Mode – when set to Turnstile Widget is only displayed in cases where an interaction is required. This essentially makes it “invisible” for most valid users.
  • Disable Submit Button until challenge is complete.
  • Custom Error Message

Further down the settings page, you will see several different tabs based on what plugins your site has installed. Here you can enable Turnstile on your websites forms.

Simply toggle the tabs, and select the checkbox for each form you want to enable Turnstile on. There may also be some other settings available for certain integrations.

Finally, when you first start your “Site Key” or “Secret Key”, or update it, you will be required to test the API response, to make sure everything is working OK. Simply complete the Turnstile challenge, and click “TEST RESPONSE”.

Supported Integrations

You can currently enable Turnstile on the following forms:

WordPress

  • Login Form
  • Registration Form
  • Password Reset Form
  • Comments Form

WooCommerce

  • Checkout
  • Pay For Order
  • Login Form
  • Registration Form
  • Password Reset Form

Form Plugins

  • WPForms
  • Fluent Forms
  • Contact Form 7
  • Gravity Forms
  • Formidable Forms
  • Forminator Forms

Other Integrations

  • Elementor Pro Forms
  • Easy Digital Downloads Forms
  • Mailchimp for WordPress Forms
  • BuddyPress Registration Form
  • bbPress Create Topic & Reply Forms
  • MemberPress Forms
  • Ultimate Member Forms
  • WP-Members Forms
  • wpDiscuz Comments Form
  • WordPress Multisite

Example Screenshot

Here’s an example of what the Turnstile challenge will look like when enabled on your WordPress Login Form:

Cloudflare Turnstile Widget
AD

Need a WooCommerce affiliate program?

Coupon Affiliates allows you to create an advanced coupon based affiliate program for WooCommerce, and display detailed coupon usage statistics.

Give your affiliates access to a user-friendly affiliate dashboard for their coupons, to view coupon usage statistics, recent orders, commission earned, referral URLs and more. Try now, free for 7 days!

Why is Turnstile better than reCAPTCHA?

There are two main ways in which Turnstile is better than reCAPTCHA. Firstly, it doesn’t require user interaction, meaning that users don’t have to solve a puzzle or click images, making the process much easier and user-friendly.

Secondly, it’s a big improvement in terms of privacy, since the data sent by reCAPTCHA to Google is used for ad targeting, while Cloudflare Turnstile claims they will “never harvest data for ad retargeting”.

To learn more about Cloudflare Turnstile, click here.







29 thoughts on “How to add Cloudflare Turnstile to WordPress Forms

  1. Awesome to see that you turned (no pun intended) this out so quickly! Is there support to enable Turnstile on only select Gravity Forms?

    1. Thanks Jeseph!

      Yes, with Gravity Forms you need to select the option to enable it on all your forms, but then under that there is a field to enter form IDs that you don’t want Turnstile to show on, if needed.

      1. I’m not seeing any way to turn Turnstile on for Gravity Forms. I am running multisite and have gravity forms network activated and there are no settings appearing in either the gf menus or in the turnstile plugin settings. Thanks.

    1. Hi, the plugin should work on much older versions of WordPress, but I’d suggest using the latest version (6+).

    1. No problem! Currently, we only plan to add support for the larger / most popular forms plugins, but we’ll certainly consider it in the future!

  2. Everything set up and configured correctly, but nothing happens when I click the “Test API Response” button? The page simply reloads and shows the same “Almost done…” message. Also after clearing LSCache.

  3. Please ignore my previous comment. This was caused by my server’s Content Security Policy. Added Cloudflare to the list and got it working. Thank you!

  4. Simple Cloudflare Turnstile Plugin – Cloudflare turnstile not working with Cloudways staging site. There’s no way to add cloudwaysapp-com as “a new site” in Cloudflare Turnstile section as the site url is xxxxx.cloudwaysapp-com; hence, getting error and unable to login to staging via Wp-admin redirect 

    Anyone run into this, find a solution?

  5. It would be great if you could expand this documentation to cover the woocommerce related settings such as skipping payment methods, but more importantly, widget location dropdown in the woocommerce checkout.

    What are the ramifications of choosing any of these different locations?

    1. Thanks for the info. Maybe we’ll add some more advanced documentation for the plugin in the future.

      There is really no ramifications on the location for the form in the WooCommerce integration settings. It’s mainly just your own preference or what position works best with your own theme.

  6. Hi! Great plug-in for my WordPress blog, it works perfectly with the default WordPress theme. I used to have hundreds of comments per week automatically unwanted thanks to Akismet, but polluting my database. Now it’s not the case anymore! Not a single one has been added for several weeks!
    But here is my problem : It doesn’t work with my custom theme, Simple Cloudflare Turnstile is not called. How to make it works? What is the PHP code or js that allow other default themes to let Simple Cloudflare Turnstile automatically added on the comment forms?

    1. Hi,

      I’m glad you are enjoying the plugin.

      Yes, the plugin will not work by default on custom forms. It only works with the integrations listed on the plugin page.

      Each different custom form/integration likely requires slightly different code to implement, as they will also use different hooks. So it’s a little difficult to give a one-for-all solution, otherwise we’d just add that to the plugin.

  7. Loving this plugin but having one weird issue… I stopped using Divi Contact Form (with reCaptcha) and moved to CF7 and your plugin. I have a site getting horrifying amounts of spam on the contact form now and it appears to be bot traffic.

    1) Does the “Enable on all CF7 Forms” option make any difference if you’re adding the shortcode to the form anyway?

    2) What’s the easiest way to set the sensitivity? Is it tied to the security level in Cloudflare or is there another factor?

    1. Hi,

      Thanks for the feedback!

      If you are using the “Enable on all CF7 Forms” option you will want to not be using the shortcode at all on any forms. The option will add it to all your forms, so the shortcode isn’t required.

      There is no way to set the sensitivity for Turnstile, this is completely managed by Cloudflare and I believe is completely separate to any security settings you have set in Cloudflare. The only settings available are the ones available on Cloudflare when adding your site to get API keys.

  8. Really great plugin, thank you. The only thing is, for me the custom error message function does not seem to work.

  9. Thank you very much for the plugin! It is well conceived, economic, and, most importantly, works. Please consider the following as potential paths of improvement:

    1. Add a theme choice per form. Rationale: webpages can be different in terms of lightness and darkness, as can the WordPress backend and frontend. It would be great to have the option to adapt the turnstile to a specific form or page.
    2. Add support for WP Zoom Forms. Rationale: This form plugin is widely circulated because it is bundled with WP Zoom themes.

    All the best!

Leave a Reply

Your email address will not be published. Required fields are marked *


code web softwareweb-programmingprogrammingbinary-dataprogramming-codeweb-1picturesearchpadlockideaemaildomaingoalgoal-1 online-shop televisioncomputermonitor cloud-computingcloud-computing-1statisticscodingdata computer-1collectivecontentlayoutshoppinghelp question technical-supportcustomer-supportsupportsiren bugspeedometerspeed performance speedometer-1speedometer-2speedometer-3result growth updatecloud-computing-2databasestartup analysis team analysis-1 medal responsive responsive-1 plug shutdownturn-on ekg-monitorservercloud worldglobala2heartbeatheartbeat-1 raylike like-1shield secure-shieldno-stoppingno-entry-signfirewallfirewall-1shield-1 secureaccess-deniedpasswordlogin-passwordsecuritysign-inblockssllockencryptionantivirusantivirus-1bug-1 bug-2insurance trustrocket fireworks gift-shopstorebankbank-1bank-2standcompanystore-1brokeragebank-3 business-and-financebank-4 business-and-finance-1 bank-5 bank-6 bank-7 architecture-and-cityshop-Cafe-restaurant-coffee-Buildingcafecoffee-shop-Cafe-restaurant-Buildinguserbank-8cafe-1business-and-finance-2brancharchitecture-and-city-1shopshop-1coding-1 shop-2cloud-computing-3server-1server-2server-3cloud-1 server-4 server-5cloud-computing-4cloud-2cloud-computing-5cloud-computing-6security-1cloud-3cloud-4backup cloud-5security-2cloud-6 server-6cloud-7infoinfo-1stopwatchspeed-1 user-1 user-2user-3 user-4 loginconversation company-1loadingwordpress computer-2 computer-3 optimizationcomputer-4 hotel computer-5 hotel-1 favourite-starcredit-cardappmonitor-1 responsive-2responsive-3Responsive-Website-Design-Development-Computersmartphoneweb-settingsapplicationmaintenancedashboard email-1 communicationscommunications-1communications-2communications-3discuss-issueinformationquestion-1surveysurvey-1question-2QUESTIONquestion-3INFOui ui-1 server-7cloud-8 server-8