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

2 Likes

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 whole 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.

2 Likes

YOU ARE THE MVP!! I was wracking my brain trying to get this to work a thousand different ways… Webflow and their “spam filtering” that doesn’t actually filter any spam but instead filters your anti-spam measures. I should have known.

The only issue I see is that there is no server-side validation and as per the Cloudflare docs is a bit of a must have: Server-side validation | Cloudflare Turnstile docs

Hi @all,

I’ve found the solution, and it’s working perfectly at the moment. I’ll monitor it for a week, and if everything goes smoothly, I’ll create a detailed documentation of each step, so you can use it as well.

Best regards,

Hi Fabian, thanks for your comment. I would love to hear the potential solution you have developed. Been trying to get Cloudflare Turnstile to function on Webflow forms.

I am having same issue did anybody solve this problem ?

Just turn on Webflow’s bot protection (recently released). It uses Cloudflare Turnstile.