--- title: How to add Cloudflare Turnstile to your SiteManager Form? description: In this article you will learn how to upgrade your existing SiteManager Form with a captcha powered by Cloudflare Turnstile. --- [Skip to content](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#main-content) [![SiteManager Platform](https://support.sitemanager.io/hs-fs/hubfs/SM_Platform-logo.png?width=164&height=40&name=SM_Platform-logo.png)](https://support.sitemanager.io/en?hsLang=en) Open main navigation Close main navigation - [Go to sitemanager.io](https://www.sitemanager.io/) [Go to sitemanager.io](https://www.sitemanager.io/) How can we help? - There are no suggestions because the search field is empty. 1. [Knowledge Base](https://support.sitemanager.io/en?hsLang=en) 2. [Forms](https://support.sitemanager.io/en/forms?hsLang=en) 3. [Captcha](https://support.sitemanager.io/en/forms?hsLang=en#captcha) # How to add Cloudflare Turnstile to your SiteManager Form? ## In this article you will learn how to upgrade your (existing) form(s) with Cloudflare Turnstile - [You will need](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#you-will-need) - [Important](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#important) - [First Steps](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#first-steps) - [Finalizing Widget Setup](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#finalizing-widget-setup) - [Installing the Integration](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#installing-the-integration) - [Secret Key & Site Key](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#secret-key-site-key) - [Upgrading your form](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#upgrading-your-form) - [Adding the new captcha](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#adding-the-new-captcha) ### You will need - A SiteManager Form (from our **Platform Library** or **Snippet**) - An account on [Cloudflare](https://dash.cloudflare.com/sign-up?to=/:account/turnstile) ### Important Cloudflare Turnstile will not work in older forms! An older form usually has the ID **custom\_form\[:swpageitemid:\]** while a newer form will have the ID **s-form\[:swpageitemid:\]\_\[:swpagelistid:\]** ### First Steps Our first step will be to head over to Cloudflare and [create an account.](https://dash.cloudflare.com/sign-up?to=/:account/turnstile) If you already have an account you can skip this step and continue on [the next step](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#creating-a-widget) ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-08-46-53-3579-AM.png?width=670&height=307&name=image-png-Jun-18-2026-08-46-53-3579-AM.png)   After signing up / logging in you'll see the [Turnstile Widgets](https://developers.cloudflare.com/turnstile/) page, here we click on **Add widget manually** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-08-53-19-6907-AM.png?width=670&height=341&name=image-png-Jun-18-2026-08-53-19-6907-AM.png) ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-08-57-11-7907-AM.png?width=670&height=340&name=image-png-Jun-18-2026-08-57-11-7907-AM.png) For the creation of our widget we need to fill out some information: - [Widget Name](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#widget-name) - [Hostname Management](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#hostname-management) - [Widget Mode](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#widget-mode) --- #### Widget mode In this field we need to give our widget a name. In this example we will use the name of our project in SiteManager. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-15-24-5183-AM.png?width=670&height=134&name=image-png-Jun-18-2026-09-15-24-5183-AM.png) #### Hostname Management The next section is where we will select our domain. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-15-50-9150-AM.png?width=670&height=312&name=image-png-Jun-18-2026-09-15-50-9150-AM.png) If you haven't added a hostname yet, you can do so by clicking **Add Hostnames** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-02-43-0334-AM.png?width=670&height=339&name=image-png-Jun-18-2026-09-02-43-0334-AM.png) Add your domain in the first field and click **Add**. This will add your domain in the hostname list. Select your domain in the **Selected Hostname list** and click **Save**. You can't add the sitemn.gr/yourprojectname as a domain. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-04-29-7083-AM.png?width=670&height=339&name=image-png-Jun-18-2026-09-04-29-7083-AM.png) If you don't see the button to add a hostname, you need to type in your domain, this will then show "add 'domain' as a custom hostname". ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Aug-03-2026-08-14-33-9117-AM.png?width=2242&height=1301&name=image-png-Aug-03-2026-08-14-33-9117-AM.png) #### Widget Mode You'll notice, there are 3 availble modes for our widget: Managed, Non-interactive, Invisible. For this guide, let's choose Non-interactive. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-08-59-22-5609-AM.png?width=670&height=308&name=image-png-Jun-18-2026-08-59-22-5609-AM.png) ### Finalizing Widget Setup When you have added your domain & selected the widget you want to use, click **Create** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-06-10-3226-AM.png?width=670&height=343&name=image-png-Jun-18-2026-09-06-10-3226-AM.png) This will show you the **Secret Key** & **Site Key** that we will need to setup the Integration in SiteManager ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-06-56-5483-AM.png?width=670&height=337&name=image-png-Jun-18-2026-09-06-56-5483-AM.png) --- ### Installing the integration When we have setup our widget in Cloudflare, the next step is to install the **Cloudflare Turnstile Integration** from the Integrations Overview.  ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-08-45-28-3990-AM.png?width=356&height=351&name=image-png-Jun-18-2026-08-45-28-3990-AM.png) After installing the integration, click on **Connect** to open the popup.  ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-20-26-2984-AM.png?width=670&height=422&name=image-png-Jun-18-2026-09-20-26-2984-AM.png) ### Secret Key & Site Key In the popup, we will need to fill in our **Secret Key** & **Site Key** that we got when setting up our widget. When filled in, we can click **Connect** to finish setting up the integration! In Cloudflare you can view both keys at any time, you can find them again by clicking Edit Widget ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-23-57-6444-AM.png?width=670&height=346&name=image-png-Jun-18-2026-09-23-57-6444-AM.png) At the bottom of the page, you can find your Site Key. To view your Secret Key, click on **View** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-24-24-5517-AM.png?width=670&height=340&name=image-png-Jun-18-2026-09-24-24-5517-AM.png) ### Upgrading your form Next up, is upgrading your form with the Cloudflare Turnstile field. To upgrade an existing form component, you have two options (click on the name to be taken to the section that applies to your form): - [No‑code Editor](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#no-code-environment): If the form was created using the no-code editor or added from the project library. - [Code Editor](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#code-environment): If the form has been created using the Code Editor To know which type of form you have, we can click on the No-Code Editor icon as shown in the image below. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-19-2026-06-30-19-9352-AM.png?width=670&height=326&name=image-png-Jun-19-2026-06-30-19-9352-AM.png) In the No-Code Editor, you'll see a block named Form on the left side in the Layers panels. A Form that has been made usng the Code Editor, will have this icon in front of it: "\<\>". ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-19-2026-06-22-31-7129-AM.png?width=670&height=326&name=image-png-Jun-19-2026-06-22-31-7129-AM.png) If your component has been using no-code editor, you'll see the form fields like in the image below. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-19-2026-06-32-20-4559-AM.png?width=670&height=326&name=image-png-Jun-19-2026-06-32-20-4559-AM.png) --- #### No-Code Editor Only use this section if your form has been using the No-Code Editor or if it has been installed from the Platform Library. If you are not sure, check out the section above: [No-Code vs Code](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#no-code-vs-code-form) To add Cloudflare Turnstile to your form using the No-Code Editor, click on the **No-Code Editor icon.** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-19-2026-06-30-24-7725-AM.png?width=670&height=326&name=image-png-Jun-19-2026-06-30-24-7725-AM.png) Next up, we need to click on the three dots next to form \> Add element ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-19-2026-06-34-00-4005-AM.png?width=670&height=327&name=image-png-Jun-19-2026-06-34-00-4005-AM.png) ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-19-2026-06-32-56-0584-AM.png?width=670&height=324&name=image-png-Jun-19-2026-06-32-56-0584-AM.png) This will open a popup, in this popup navigate to Form Elements. At the end of the list, we'll find the block: Cloudflare Turnstile. Click on the block to install it in your form ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-19-2026-06-34-43-4934-AM.png?width=670&height=390&name=image-png-Jun-19-2026-06-34-43-4934-AM.png) Click Save & Exit to exit the No-Code Editor. You can then continue adding the block to your form in the next step: [Adding the new captcha](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#adding-the-new-captcha) --- #### Code Editor Only use this section if your form has been using the Code Editor. If you are not sure, check out the section above: [No-Code vs Code](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#no-code-vs-code-form) To add Cloudflare Turnstile to your form using the Code Editor, click on the **Component Settings \> View Code** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-29-15-8346-AM.png?width=670&height=326&name=image-png-Jun-18-2026-09-29-15-8346-AM.png) Once we are in the Code View, we'll continue by navigating to "Build Form" ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-32-35-2298-AM.png?width=670&height=417&name=image-png-Jun-18-2026-09-32-35-2298-AM.png) In this overview, you'll see all the blocks that you can already add to your form. We can add new blocks by clicking on the "+" button.  ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-34-26-2766-AM.png?width=670&height=391&name=image-png-Jun-18-2026-09-34-26-2766-AM.png) In our newly created block, we will click on "CMS configuration", then on the right-hand side we'll search for the Cloudflare Turnstile snippet. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-35-18-0314-AM.png?width=670&height=391&name=image-png-Jun-18-2026-09-35-18-0314-AM.png) The snippet will add everything needed for Cloudflare Turnstile to work. You can then click save changes, exit the Code Editor by clicking the SiteManager logo in the left corner of the screen and continue to the next step: [Adding the new captcha](https://support.sitemanager.io/en/forms/captcha/how-to-add-cloudflare-turnstile-to-your-sitemanager-form#adding-the-new-captcha) ### Adding the new captcha Once the previous steps are complete, we are done in the **Code View**. You can exit out of the Code View by clicking on the SiteManager Logo in the top left corner. Let's go to a page with a form. To edit our form, click on the pencil icon. ![](https://support.sitemanager.io/hs-fs/hubfs/undefined-Jun-18-2026-09-37-42-5695-AM.png?width=670&height=327&name=undefined-Jun-18-2026-09-37-42-5695-AM.png) In this view we continue by clicking on **Build Form** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-38-11-8095-AM.png?width=670&height=340&name=image-png-Jun-18-2026-09-38-11-8095-AM.png) This will show us all the blocks that are already in this form, let's click the plus icon to add in a new block above the submit button. ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-38-41-3253-AM.png?width=670&height=343&name=image-png-Jun-18-2026-09-38-41-3253-AM.png) This will open a popup where we can find our newly created **Cloudflare Turnstile block** ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-39-34-4563-AM.png?width=670&height=342&name=image-png-Jun-18-2026-09-39-34-4563-AM.png) Once the Cloudflare Turnstile block has been added, the widget has been added to your form! ![](https://support.sitemanager.io/hs-fs/hubfs/image-png-Jun-18-2026-09-40-01-9822-AM.png?width=670&height=344&name=image-png-Jun-18-2026-09-40-01-9822-AM.png) ### All done! You successfully added Cloudflare Turnstile to your form, don't forget to **publish** your changes!   - [Getting Started](https://support.sitemanager.io/en/getting-started?hsLang=en) - [Dashboard](https://support.sitemanager.io/en/dashboard?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/dashboard?hsLang=en#getting-started) - [Project Dashboard](https://support.sitemanager.io/en/dashboard?hsLang=en#project-dashboard) - [White Label & Add-ons](https://support.sitemanager.io/en/dashboard?hsLang=en#white-label-add-ons) - [Account](https://support.sitemanager.io/en/account?hsLang=en#main-content) - [Account Settings](https://support.sitemanager.io/en/account?hsLang=en#account-settings) - [My Company](https://support.sitemanager.io/en/account?hsLang=en#my-company) - [Subscription](https://support.sitemanager.io/en/account?hsLang=en#subscription) - [Project](https://support.sitemanager.io/en/project?hsLang=en#main-content) - [General](https://support.sitemanager.io/en/project?hsLang=en#general) - [Upgrade Project](https://support.sitemanager.io/en/project?hsLang=en#upgrade-project) - [SEO](https://support.sitemanager.io/en/seo?hsLang=en#main-content) - [Basics](https://support.sitemanager.io/en/seo?hsLang=en#basics) - [Advanced](https://support.sitemanager.io/en/seo?hsLang=en#advanced) - [Go Live](https://support.sitemanager.io/en/go-live?hsLang=en#main-content) - [Prepare Project](https://support.sitemanager.io/en/go-live?hsLang=en#prepare-project) - [Prepare Domain](https://support.sitemanager.io/en/go-live?hsLang=en#prepare-domain) - [Going Live](https://support.sitemanager.io/en/go-live?hsLang=en#going-live) - [Advanced](https://support.sitemanager.io/en/go-live?hsLang=en#advanced) - [Content](https://support.sitemanager.io/en/content?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/content?hsLang=en#getting-started) - [Page Management](https://support.sitemanager.io/en/content?hsLang=en#page-management) - [Content Management](https://support.sitemanager.io/en/content?hsLang=en#content-management) - [Language Management](https://support.sitemanager.io/en/content?hsLang=en#language-management) - [Image Library](https://support.sitemanager.io/en/content?hsLang=en#image-library) - [Collaborating on a project](https://support.sitemanager.io/en/content?hsLang=en#collaborating-on-a-project) - [Page Components](https://support.sitemanager.io/en/page-components?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/page-components?hsLang=en#getting-started) - [HTML](https://support.sitemanager.io/en/page-components?hsLang=en#html) - [CSS](https://support.sitemanager.io/en/page-components?hsLang=en#css) - [JavaScript (JS)](https://support.sitemanager.io/en/page-components?hsLang=en#javascript-js) - [How To](https://support.sitemanager.io/en/page-components?hsLang=en#how-to) - [Layout Components](https://support.sitemanager.io/en/layout-components?hsLang=en) - [No-Code Editor](https://support.sitemanager.io/en/no-code-editor?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/no-code-editor?hsLang=en#getting-started) - [Properties](https://support.sitemanager.io/en/no-code-editor?hsLang=en#properties) - [Advanced](https://support.sitemanager.io/en/no-code-editor?hsLang=en#advanced) - [Design](https://support.sitemanager.io/en/design?hsLang=en#main-content) - [Overview](https://support.sitemanager.io/en/design?hsLang=en#overview) - [Design editor](https://support.sitemanager.io/en/design?hsLang=en#design-editor) - [Design Panels](https://support.sitemanager.io/en/design?hsLang=en#design-panels) - [Responsive](https://support.sitemanager.io/en/design?hsLang=en#responsive) - [Fonts](https://support.sitemanager.io/en/design?hsLang=en#fonts) - [Layouts](https://support.sitemanager.io/en/design?hsLang=en#layouts) - [Code](https://support.sitemanager.io/en/code?hsLang=en#main-content) - [Introduction](https://support.sitemanager.io/en/code?hsLang=en#introduction) - [Token Management](https://support.sitemanager.io/en/code?hsLang=en#token-management) - [Project Setup](https://support.sitemanager.io/en/code?hsLang=en#project-setup) - [ToolStack](https://support.sitemanager.io/en/code?hsLang=en#toolstack) - [Private Library](https://support.sitemanager.io/en/code?hsLang=en#private-library) - [Dynamic Content](https://support.sitemanager.io/en/dynamic-content?hsLang=en#main-content) - [Getting started](https://support.sitemanager.io/en/dynamic-content?hsLang=en#getting-started) - [Basics](https://support.sitemanager.io/en/dynamic-content?hsLang=en#basics) - [Advanced](https://support.sitemanager.io/en/dynamic-content?hsLang=en#advanced) - [External Content](https://support.sitemanager.io/en/external-content?hsLang=en#main-content) - [Getting started](https://support.sitemanager.io/en/external-content?hsLang=en#getting-started) - [Configuration & implementation](https://support.sitemanager.io/en/external-content?hsLang=en#configuration-implementation) - [Logic (Smart Content)](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#getting-started) - [Configuration & Implementation](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#configuration-implementation) - [Logic](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#logic) - [AB testing](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#ab-testing) - [Timed Content](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#timed-content) - [Password Protected Content](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#password-protected-content) - [Smart API](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#smart-api) - [Integrations](https://support.sitemanager.io/en/integrations?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/integrations?hsLang=en#getting-started) - [Integrations](https://support.sitemanager.io/en/integrations?hsLang=en#integrations) - [Advanced](https://support.sitemanager.io/en/integrations?hsLang=en#advanced) - [Modules](https://support.sitemanager.io/en/modules?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/modules?hsLang=en#getting-started) - [Modules](https://support.sitemanager.io/en/modules?hsLang=en#modules) - [Upgrade Center](https://support.sitemanager.io/en/upgrade-center?hsLang=en#main-content) - [Components](https://support.sitemanager.io/en/upgrade-center?hsLang=en#components) - [Forms](https://support.sitemanager.io/en/forms?hsLang=en#main-content) - [General](https://support.sitemanager.io/en/forms?hsLang=en#general) - [Captcha](https://support.sitemanager.io/en/forms?hsLang=en#captcha) - [Form Actions](https://support.sitemanager.io/en/forms?hsLang=en#form-actions) - [Extending Forms](https://support.sitemanager.io/en/forms?hsLang=en#extending-forms) - [Email Templates](https://support.sitemanager.io/en/forms?hsLang=en#email-templates) - [Advanced](https://support.sitemanager.io/en/forms?hsLang=en#advanced) - [Cookie Settings](https://support.sitemanager.io/en/cookie-settings?hsLang=en#main-content) - [Getting Started](https://support.sitemanager.io/en/cookie-settings?hsLang=en#getting-started) - [Configuration](https://support.sitemanager.io/en/cookie-settings?hsLang=en#configuration) - [API Call](https://support.sitemanager.io/en/api-call?hsLang=en#main-content) - [Configuration](https://support.sitemanager.io/en/api-call?hsLang=en#configuration) [![SiteManager Icon](https://support.sitemanager.io/hs-fs/hubfs/logo_icon_big.png?width=15&height=24&name=logo_icon_big.png "SiteManager Icon")](https://support.sitemanager.io/en?hsLang=en)   Copyright © 2026, SiteManager Group