How to Use Cloudflare's Turnstile Captcha in an HTML Form with HTML, CSS, and PHP

Cloudflare Turnstile is a free tool that replaces CAPTCHAs. Turnstile provides website visitors with a frustration-free, CAPTCHA-free web experience. Additionally, Turnstile prevents abusive usage and confirms that visitors are genuine—without compromising privacy and without the poor user experience associated with CAPTCHAs. Moreover, it is much more reliable than, for example, Google reCAPTCHA.

In this guide, we'll show you how to embed Turnstile into an HTML form and validate it with PHP, then send the form using either the simple PHP mail function or an SMTP mailer.

All this will be explained using a simple example:

Cloudflare

Before we proceed to integrate it into the website, we need to generate the keys from Cloudflare for Turnstile. For this, you must have an account with Cloudflare.

After signing in, click on Turnstile and then "Add Site" to add the website.

Next, give the Turnstile a name and provide the domain. If you want to completely remove the Captcha, you can set it to Invisible here. In Non-Interactive mode, the user does not need to do anything to solve the Captcha. However, it is recommended to use the managed mode. Pre-clearance can be turned off depending on usage. For a form, it is recommended to turn this off. Now just click on Create, and the keys are ready.

Now we have the keys and can start embedding. There are 2 keys, one public and one private.

Integration on the Website

When integrating it on the website, there are two types: client-side integration and server-side integration. To ensure complete and secure protection against spam and bots, it is necessary to do both. Nevertheless, this guide is divided into client-side and server-side integration.

Client-side Integration

To use the Cloudflare Captcha, we first need to insert this code into the head section.

Next, the element itself must be inserted into the form. Note that instead of "Your public key," you should enter your generated client-side key. Now the widget should already be visible on your page.

Since I explain everything using an example, here's the example code for the above form:

Thus, the client-side integration is now complete.

Server-Side Integration

To ensure once again that the visitor is not a bot, the Captcha is also validated server-side. I've done this step with simple PHP. In the further course of this guide, I'll show you how to do just the server-side validation with PHP, how to use it directly with the PHP mail function, and then also how we can send the form input over SMTP to ensure a secure arrival of the message with most email providers.

The Server-Side Integration

If you intend to use this code for other projects, for example, for a login, I'm also providing this code here. If you only want to use a form that forwards the contents via email, you can skip this part since the code is integrated in the following cases anyway.

Server-Side Integration with Simple PHP Mail Function

Below is the code for the send.php file, which handles validation and subsequent sending using the simple PHP mail function. However, since this function usually only reliably works on your own domain, it is recommended to use the SMTP function that follows. Nevertheless, the code is provided here for you. It is important that this file has the same name as the action tag in your form, otherwise nothing will work here. To make this work, you still need to enter the Secret Key in the right place and specify the recipient email. Additionally, the subject can also be chosen. If you have other form fields, it is important to modify this function accordingly. If you're not sure how to do that, just ask ChatGPT.

Server-Side Integration with SMTP Mail Function

Below is the code for the send.php file with the SMTP mail function. Essentially, it works the same as the one above, but the email is sent via the SMTP server. To use this, you need two things: SMTP access and PHPMailer. You can download the latest PHPMailer here or simply copy the one used in the example. Then, you need to properly integrate it into your folder structure. Download the sample file to understand where to place the folders. Next, you just need to replace the data: add the secret key, add the SMTP server, as well as the SMTP username and password. Since there are already many good tutorials for this, I won't show how to get this data, but here's a video tutorial. As before, sending the contents will only work if it's exactly the same form as above; if not, please adjust this file or ask ChatGPT.

That's it for this guide. If you have any further questions or would like me to handle the integration for you, feel free to contact me.