CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) are used to distinguish between human users and automated bots. They e.g. block bots from automatically submitting forms with spam content.

Adding a CAPTCHA

To add a CAPTCHA drag and drop the Captcha element from the Forms category of the left sidebar into your form section. Once it's part of the form, you will see that you can choose between two options: the Turnstile CAPTCHA by Cloudfare and the native CAPTCHA. 

Turnstile CAPTCHA

Turnstile by Cloudfare is a third-party integration that offers accessible CAPTCHAs.

To set up your Turnstile click on Manage captcha. This will open the Cloudfare login page. If you don't have a Cloudfare account yet, you will need to signup which means that you also agree to Cloudfare’s terms, privacy policy, and cookie policy. 

Once you are logged in you will be able to create your widget. Click on Add widget.

Next, click on + Add Hostname. This will open a slideout on the right side. Here you have to add the preview URL of your account (e.g. preview.sitejet.io or preview.sitejet.dev or preview.{your custom domain}) and the domain that you want to use for that website. You can also check the CAPTCHAs settings panel in the website builder where we display the preview URL and the website's domain (if already added to the project). Once you have add all relevant hostnames, click on Add. 

Then you can select the widget mode. You can choose between:

• Managed: This mode is managed by Cloudflare. It automatically chooses the appropriate action based on various signals and risk levels. Cloudflare will use the information from the visitor to decide if an interactive challenge should be used. Turnstile will only require interaction if a further check is necessary to verify that the visitor is human. When an interaction is required, the user will be prompted to check a box (no images or text to decipher). 
  
• Non-interactive: Visitors will see a widget with a loading bar while the browser challenges run. Unlike managed mode, visitors will never be required or prompted to interact with the widget.
  
• Invisible: This mode is similar to non-interactive mode where visitors will never interact with the Turnstile widget. Visitors will not see a widget or any indication that an invisible browser challenge is in progress.  

After that, you can choose if you want to opt for pre-clearance for this site and hit the Create button. 

As the final step, you will see the widget's site key and secret key. 

Copy them one by one and add them in the settings panel in the website builder to the respective input fields.

If the site key is incorrect, you will see this directly in the editor, where the captcha should appear. If the secret key is incorrect, you will only notice this if you actually submit a form via the website. We therefore recommend that you test your setup on the website by submitting a form.

As soon as these steps are complete, you can adjust the theme and the size of the CAPTCHA under General.

• For theme you can choose between Light, Dark and Auto (automatically adjusts to the browser settings)
  
• For size you can choose between
  • Normal: 300px x 65px
    
    
  • Flexible: 100% (min: 300px) x 65px
  • Compact: 150px x 140px
    
    

When you save and reload the website, you should see your selected CAPTCHA in the form section. 

For example, if you select a non-interactive captcha in light mode with flexible size, it could look something like this:

Or with dark mode:

Please note that if you have selected "Invisible" widget mode, a placeholder will be shown in the editor and in preview mode, but you will not see anything on the preview website - or the actual website. 

Important: Since it is a third-party you will need to ensure that any consent management solution you add to your website recognizes Turnstile as a necessary cookie otherwise the captcha might not work. 

Native CAPTCHA

The native CAPTCHA presents a visual challenge, requiring users to correctly enter letters and numbers into the input field next to it. It requires no setup and also offers protection, but may present accessibility limitations for some users, particularly those using assistive technologies.

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.