WordPress, protect Contact Form 7 with Cloudflare Turnstile

Introduction

My ongoing process is to remove any Google products whenever I can, another opportunity arose when they reached out to inform me that reCAPTCHA was moving to Google Cloud. Aside from being an obtrusive nightmare of a system the update could incur extra costs if utilised on a moderately busy site. This won’t be happening till end of play in 2025 but now seemed a good time to sort it all out.

Amongst my caveats was the requirement for any solution to work with Contact Form 7 – my form fulfilment software of choice.

Update, CF7 now natively supports Turnstile

June 2025

As of the v6.1 update CF7 natively supports Cloudflare Turnstile via an integration module. If you only have CF7 forms please read this article instead, it will eliminate the need for an additional plugin.

Enter Cloudflare Turnstile

I was aware that this was available as a service and would in fact ‘out of box’ using their plugin protect the WordPress login, registration, password reset and comments forms.

After more research it appeared to cover quite a few of the biggies out there like WooCommerce, Jetpack and Gravity Forms. Thankfully the plugin homepage now includes CF7 under the Form Plugins section, so I decided to give it a whirl.

Setting it all up

You’re going to require a Cloudflare account so I will assume at this point you have one.

Cloudflare

In the left hand menu, under WAF, you’ll see a link to Turnstile. Click the link and follow the instructions to include a widget, you can have multiple instances and each is known as a Turnstile Widget. Once complete you’ll be given access to a Site Key and Secret Key, you’ll need that data for configuring the plugin.

WordPress Cloudflare Turnstile Plugin

This is a simple and well constructed plugin with ample configuration if you need it but the defaults work just fine.

General Settings:

• Theme
  Choose between Light, Dark and the default Auto.
• Language
  Select your language of choice or leave at default Auto Detect.
• Disable Submit Button
  If checked the submit button will remain greyed out and unavailable to be clicked till the checking process is completed.

Advanced Settings

• Widget Size
  Compact – 150px, Flexible – 100% or default Normal – 300px.
• Appearance Mode
  – Always (default)
  Turnstile is always displayed for all visitors.
  – Interaction Only
  Turnstile is only displayed in cases where an interaction is required. This essentially makes it invisible for most valid users.
• Defer Scripts
  When enabled the loaded JavaScript files will be deferred.
• Custom Error Message
  Shown if the form is submitted without completing the challenge, overriding the localised message of “Please verify that you are human.”
• Extra Failure Message
  This will show a message below the Turnstile widget if they receive the “Failure!” response. Useful to give instructions in the very rare case a valid user is being flagged as spam.

Contact Form 7 Settings

If you have Contact Form 7 installed and active the following image below shows the section that allows you to activate Turnstile for all CF7 forms or use the shortcode provided as part of your individual layouts in the form editor.

Heads up about CF7 Asset Management using filters

Contact Form 7 has built in filters that enable you to stop loading the JavaScript and CSS stylesheet.

add_filter( 'wpcf7_load_css', '__return_false' );
add_filter( 'wpcf7_load_js', '__return_false' );

Unfortunately if you have utilised the wpcf7_load_js filter this will result in the Turnstile widget interfering with CF7‘s JavaScript routines. If you opt to use Cloudflare Turnstile you will need to comment out (or remove) that code in order to have a smooth working process. The wpcf7_load_css filter can be kept as no conflicts occur with its usage.

Turnstile Asset Management

Another wonderful aspect to this plugins approach is that it sorts out asset management for you. JavaScript, CSS etc are all only loaded when required on any page / post that includes a form.

This is true whether you choose to select ‘Enable on all CF7 Forms’ or manually add to your templates using the shortcode.

Final thoughts

Aside from at my end having some issues as I’d enabled the wpcf7_load_js filter and had to debug some fairly weird behaviour (you have been warned!) the process was silky smooth.

For the most part the defaults set at Cloudflare and the Plugin settings pages “simply work” and options are well laid out and have explanatory help text.

I’d recommend if you have the capability to test the implementation on a staging site before committing to running on Live / Production.

Article Information

About Dave A.K.A. 'barrd'

Dave is a Bristol based Scottish Expat who has 20+ years experience of web development. Loves playing guitar, reading books, watching Sci-Fi and tinkering with tech.

Read more about Dave