Cloudflare Turnstile is a modern reCAPTCHA alternative. It's our peference here at Submit JSON.
Before getting started make sure to reference the Cloudflare Turnstile Getting Started documentation.
✨🤖 Cloudflare Turnstile is available on all paid plans
<head> tag.<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
Follow Cloudflare's instructions on how to render the client-side integration
⚡️ OR ⚡️ if you're using a JS framework there is likely a package that will make the integration easier:
Once the widget is rendering, you can send the Turnstile response token to our API in two ways.
cf-turnstile-response property. This is the Turnstile's default behavior and requires no additional config from you.document.getElementById('myForm').addEventListener('submit', async function (e) {
e.preventDefault()
const formData = new FormData(this);
const data = Object.fromEntries(formData)
// data is something like { ..., 'cf-turnstile-response': 'xxxxxx'}
const response = await fetch('https://api.submitjson.com/v1/submit/XxXx', {
method: 'POST',
headers: {
'content-type': 'application/json',
'X-API-Key': 'sjk_xxx',
},
body: { data },
})
const submission = await response.json()
})
turnstileToken key. For this example we'll use the JS client.await sj.submit({ name: 'Luffy', loves: 'Meat' }, {
turnstileToken: 'xxxxxxxxxx'
})
Now that you've integrated Turnstile with your front-end it's time to validate the token.
We've got you all covered here. Follow these instructions to set it and forget it:
🚛✨💚 Nice job, submissions to your endpoint are now validated with Cloudflare Turnstile