Forms + Cloudflare Turnstile Recaptcha

Hi -

Is it possible to use Cloudflare Turnstile with webflow forms? I can’t find any examples of sites using it.

Im also interested to know if someone have done this.

So to make Cloudflare CAPTCHA Turnstile work with Webflow you will need to install the script below in the <Head /> of the page that you have your form:

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

And them inside your form, add an HTML Embed component, and add the code below inside of it:

<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY" data-callback="javascriptCallback"></div>

Make sure to change YOUR_SITE_KEY, by your newly generated site Key in Cloudflare, under the Turnstile page.

And done, publish the page and it all should be working! :grin:

OBS: Make sure you turn the toggle off in the Settings of the project for Google Recaptcha

1 Like

Thanks so much — your post gave me the confidence to implement this! And it worked for me, as well!

On a related note: is there a way to control the size of the Turnstile Captcha?

Is this solution still working for you? I’ve been trying it and keep on getting Internal Server Errors and the form is not being submitted even though the Turnstile successfully verified the user.

Yes, this solution still works for me!

Any idea why it still might give an error like this?

@360Creators Remove the Turnstile script and embed then test. If the issue remains then there is potentially an issue with your form implementation. If the issue goes away you know it is related to Turnstile. If you are looking to reduce/eliminate spam and get better form handling with more comprehensive features I throw a hole hearted recommendation to use Basin. It’s what powers all my Webflow form needs.

Hi, I found this tutorial on how to first add cloudflare with proxying to Webflow: https://youtu.be/xFXAthm-X0s?si=tn-c2SkEBeYzinpG. It works for me with SSL on CF set to full… Will have to let you know in a couple of months if I have any trouble when Webflow renews the cert. From there you should be able to implement turnstile quite easily and gain the additional benefits from Cloudflare.

I had the same problem, just as I was about to give up I tried turning off the Spam filtering option in the forms section in site settings, That resolved this issue for me.