DEV Community: Silly Coder

Adding Cloudflare Turnstile to Zoho Form HTML Exports

Silly Coder — Tue, 31 Mar 2026 14:32:47 +0000

Zoho Forms lets you export your form as a standalone HTML package — but that exported form posts directly to Zoho's servers with no spam protection. This guide walks you through adding Cloudflare Turnstile using a single drop-in script, with optional server-side verification via a Cloudflare Worker.

The library is open source — grab it on GitHub or install via npm.

What we're building

Browser → Turnstile challenge → token issued
       → form submitted → Cloudflare Worker
       → token verified server-side
       → payload forwarded to Zoho

The library (zoho-turnstile.js) works in two modes:

Client-only — blocks submissions with no token. Stops browser-based bots. No backend needed.
Full verification — routes submissions through a Cloudflare Worker that verifies the token before anything reaches Zoho. Stops everything.

⚠️ Client-only mode cannot stop direct POST attacks. For production forms, full verification is strongly recommended.

Prerequisites

A Cloudflare account (free tier is fine)
A Zoho Form exported as HTML (index.html, css/form.css, js/validation.js)
A domain registered under Cloudflare (for full verification)

Step 1 — Get a Cloudflare Turnstile Site Key

Go to dash.cloudflare.com → Turnstile → Add Site
Enter your domain
Choose widget type Managed
Copy the Site Key and Secret Key — you'll need both

Step 2 — Add `zoho-turnstile.js` to your form export

You can either download the file from GitHub and drop it alongside validation.js:

contact_form/
├── index.html
├── zoho-turnstile.js   ← new
├── css/
│   └── form.css
└── js/
    └── validation.js

Or load it directly from the CDN — no download required:

<script src="https://unpkg.com/zoho-turnstile/zoho-turnstile.js"></script>

Step 3 — Initialise the library

Add the script to index.html inside <head>. Use either the local file or the CDN version from Step 2:

<script src="js/validation.js"></script>

<!-- Local file -->
<script src="zoho-turnstile.js"></script>

<!-- Or CDN -->
<script src="https://unpkg.com/zoho-turnstile/zoho-turnstile.js"></script>

Then initialise it before </body>, after your existing Zoho init vars:

<script>
  // Your existing Zoho vars — already in your export, don't duplicate
  var zf_MandArray = ["SingleLine", "Email", "MultiLine"];
  var zf_FieldArray = ["SingleLine", "Email", "MultiLine"];
  var isSalesIQIntegrationEnabled = false;
  var salesIQFieldsArray = [];

  // Turnstile init — wrapped in DOMContentLoaded to guarantee the library
  // has executed before init is called, regardless of the host environment
  document.addEventListener('DOMContentLoaded', function () {
    ZohoTurnstile.init({
      siteKey: 'YOUR_SITE_KEY'
    });
  });
</script>

That's it for client-only mode. The widget will appear above your submit button automatically.

Step 4 (optional) — Add server-side verification via Cloudflare Worker

Skip this if you're using client-only mode. If you're going to production, don't skip this.

Create the Worker

In the Cloudflare dashboard → Workers & Pages → Create → Start with Hello World
Name it zoho-contact-proxy and click Deploy
Click Edit Code, delete the default code, paste the Worker code below, click Deploy

const TURNSTILE_VERIFY_URL = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';

export default {
  async fetch(request, env) {

    // ── Only accept POST ───────────────────────────────────────────────
    if (request.method !== 'POST') {
      return new Response('Method not allowed', { status: 405 });
    }

    const referer = request.headers.get('Referer') || '';

    // ── Parse incoming form data ───────────────────────────────────────
    let formData;
    try {
      formData = await request.formData();
    } catch {
      return errorRedirect(referer, 'invalid_request');
    }

    // ── Extract and verify the Turnstile token ─────────────────────────
    const token = formData.get('cf-turnstile-response');

    if (!token) {
      return errorRedirect(referer, 'missing_token');
    }

    const turnstileOk = await verifyTurnstile(
      token,
      request.headers.get('CF-Connecting-IP'),
      env.TURNSTILE_SECRET_KEY
    );

    if (!turnstileOk) {
      return errorRedirect(referer, 'token_invalid');
    }

    // ── Strip the Turnstile field — Zoho doesn't need it ──────────────
    formData.delete('cf-turnstile-response');

    // ── Forward to Zoho ────────────────────────────────────────────────
    try {
      const zohoRes = await fetch(env.ZOHO_FORM_URL, {
        method: 'POST',
        body: formData,
        redirect: 'follow',
      });

      if (!zohoRes.ok) {
        return errorRedirect(referer, 'submission_failed');
      }
    } catch {
      return errorRedirect(referer, 'submission_failed');
    }

    // ── Success — redirect back to the form page with success param ────
    const successUrl = new URL(referer);
    successUrl.searchParams.set('zf_status', 'success');
    successUrl.searchParams.delete('zf_error');
    return Response.redirect(successUrl.toString(), 302);
  }
};

// ── Helpers ────────────────────────────────────────────────────────────────────

async function verifyTurnstile(token, ip, secret) {
  try {
    const res = await fetch(TURNSTILE_VERIFY_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        secret,
        response: token,
        remoteip: ip,
      }),
    });
    const data = await res.json();
    return data.success === true;
  } catch {
    return false;
  }
}

function errorRedirect(referer, reason) {
  if (!referer) {
    return new Response(JSON.stringify({ error: reason }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' }
    });
  }
  const url = new URL(referer);
  url.searchParams.set('zf_status', 'error');
  url.searchParams.set('zf_error', reason);
  return Response.redirect(url.toString(), 302);
}

Add environment variables

In the Worker → Settings → Variables and Secrets:

Name	Type	Value
`ZOHO_FORM_URL`	Text	Your Zoho form `htmlRecords/submit` URL
`TURNSTILE_SECRET_KEY`	Secret	Your Turnstile Secret Key

⚠️ Always add TURNSTILE_SECRET_KEY as type Secret, never Text. Secrets are encrypted and never visible after saving.

Point the form at the Worker

In index.html, change the form action from the Zoho URL to your Worker URL:

<form
  action="https://zoho-contact-proxy.yourname.workers.dev"
  method="POST"
  enctype="multipart/form-data"
  ...
>

Pass `verifyUrl` to the init call

document.addEventListener('DOMContentLoaded', function () {
  ZohoTurnstile.init({
    siteKey:   'YOUR_SITE_KEY',
    verifyUrl: 'https://zoho-contact-proxy.yourname.workers.dev'
  });
});

Options reference

Option	Type	Required	Default	Description
`siteKey`	string	✅	—	Your Cloudflare Turnstile Site Key
`verifyUrl`	string	—	`null`	Worker base URL. Enables full server-side verification
`theme`	string	—	`'light'`	`'light'` \
`size`	string	—	`'normal'`	`'normal'` \
`errorMessage`	string	—	`'Please complete the security check...'`	Shown when submission is blocked
`containerId`	string	—	`null`	Custom element ID to render the widget into
`onSuccess`	function	—	`null`	Fired when Turnstile issues a token. Receives the token as the first argument
`onError`	function	—	`null`	Fired when Turnstile encounters an error
`onExpire`	function	—	`null`	Fired when an issued token expires (tokens are valid for 5 minutes)

Methods

ZohoTurnstile.init(options)
Initialises the library. Injects the widget and patches the Zoho submit handler. Call once after the DOM is ready.

ZohoTurnstile.reset()
Resets the widget and issues a new challenge. Call this after a failed submission.

ZohoTurnstile.getToken()
Returns the current token string, or empty string if not yet issued. Useful for debugging.

Testing

Cloudflare provides special site keys for development:

Behaviour	Site Key
Always passes	`1x00000000000000000000AA`
Always blocks	`2x00000000000000000000AB`
Forces interactive challenge	`3x00000000000000000000FF`

Use 3x00000000000000000000FF during development — it forces the checkbox interaction so you're not silently pre-cleared on your own IP.

Verify the token is being issued — after solving the challenge, open DevTools → Elements and look inside the form for:

<input type="hidden" name="cf-turnstile-response" value="eyJ...">

Or run in the console:

ZohoTurnstile.getToken() // should return a non-empty string

Verify server-side is working — submit the form and check the redirect URL. You should land back on the page with ?zf_status=success.

Troubleshooting

[Cloudflare Turnstile] Error: 110200
The sitekey doesn't match the domain the form is being served from. Confirm the domain registered in the Turnstile dashboard matches exactly where the form is hosted. If testing locally, use one of the Cloudflare test keys from the Testing section above — your production sitekey will always fail on localhost or file://.

Widget doesn't appear
Check the browser console for [ZohoTurnstile] warnings. Confirm your domain is registered in the Turnstile dashboard and that zoho-turnstile.js loads before the init call.

Form submits without solving the challenge
You're being silently pre-cleared — Cloudflare automatically passes visitors it already trusts. This is expected. Use test key 3x00000000000000000000FF to force an interactive challenge.

?zf_status=error&zf_error=token_invalid
The Worker received the submission but Cloudflare rejected the token. Confirm TURNSTILE_SECRET_KEY in the Worker matches the Secret Key (not Site Key) from the dashboard. Tokens also expire after 5 minutes — have the user refresh and resubmit.

?zf_status=error&zf_error=submission_failed
Token verified but the Zoho POST failed. Confirm ZOHO_FORM_URL is the full htmlRecords/submit URL from your form export. Check Worker logs under Workers → your worker → Logs.

Zoho Catalyst CLI — Docker Setup Guide

Silly Coder — Fri, 20 Mar 2026 07:30:07 +0000

A complete guide to setting up Zoho Catalyst CLI using Docker on Windows (WSL2 + Ubuntu)

Prerequisites

Before starting, ensure you have the following:

A Windows machine with WSL2 enabled
Ubuntu installed via WSL2
Docker installed on Ubuntu — see Step 2
A Zoho Catalyst account
Basic familiarity with the terminal

Step 1 — Open Ubuntu via WSL

You can access your Ubuntu environment in any of the following ways:

Option 1 — Via the Ubuntu App:

Press Windows + S and search for Ubuntu
Click to open it

Option 2 — Via Windows Terminal, CMD or PowerShell:

wsl

Option 3 — Via any terminal that supports WSL (e.g. Windows Terminal, Git Bash):

wsl -d Ubuntu

In all cases you'll see a terminal prompt like:

username@DESKTOP-XXXX:~$

You are now inside your Ubuntu environment.

Step 2 — Install Docker on Ubuntu

Run the following commands in your Ubuntu terminal one by one:

# Remove any old Docker versions
sudo apt-get remove -y docker docker-engine docker.io containerd runc

# Update package index and install dependencies
sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg lsb-release

# Add Docker's official GPG key
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \
  sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

# Add the Docker repository
echo \
  "deb [arch=$(dpkg --print-architecture) \
  signed-by=/etc/apt/keyrings/docker.gpg] \
  https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# Install Docker Engine
sudo apt-get update
sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

# Allow your user to run Docker without sudo
sudo usermod -aG docker $USER
newgrp docker

Verify Docker is installed correctly:

docker --version

Step 3 — Create Your Project Structure

mkdir ~/projects/catalyst
cd ~/projects/catalyst

Step 4 — Create the Dockerfile

Create a file named Dockerfile inside ~/projects/catalyst:

nano Dockerfile

Paste the following content:

# Official Node.js LTS slim image — small footprint, Catalyst compatible
FROM node:20-slim

# Set working directory inside the container
WORKDIR /app

# Install Zoho Catalyst CLI globally
RUN npm install -g zcatalyst-cli

# Drop into bash shell on container start
CMD ["bash"]

Save and exit (Ctrl+X, then Y, then Enter).

Step 5 — Create the Docker Compose File

Create a file named docker-compose.yml in the same folder:

nano docker-compose.yml

Paste the following content:

services:
  catalyst:
    build: .
    image: catalyst-cli
    stdin_open: true    # keeps terminal interactive (-i)
    tty: true           # allocates a terminal (-t)
    network_mode: host  # required for OAuth login callback on localhost:9005
    volumes:
      - .:/app          # maps your project folder into the container

Save and exit (Ctrl+X, then Y, then Enter).

Why network_mode: host? Zoho Catalyst's login flow uses an OAuth callback on localhost:9005. Without host networking, Docker's isolated network intercepts this callback and the login hangs. Host mode ensures the callback reaches the container correctly.

Step 6 — Build the Docker Image

docker build -t catalyst-cli .

Verify the image was created:

docker images

You should see:

REPOSITORY     TAG       IMAGE ID       CREATED        SIZE
catalyst-cli   latest    xxxxxxxxxxxx   x hours ago    ...

Step 7 — Export the Image as a Reusable File

Save the image as a portable .tar file:

docker save -o catalyst-cli.tar catalyst-cli

Why docker save? This bundles the entire image — all layers, metadata and installed CLI — into a single portable file you can share, store on a USB drive, or keep in cloud storage.

Move it to your preferred storage location:

mv catalyst-cli.tar /path/to/your/storage/

Step 8 — Loading the Image on a New Machine

On any new machine, after installing Docker (Steps 1–2), load the image from the .tar file:

docker load -i /path/to/catalyst-cli.tar

Why docker load and not docker import? docker load fully restores the image with all layers and tags intact. docker import loses layer history and is meant for raw filesystem snapshots only.

Step 9 — Run the Container

docker compose run catalyst

You are now inside the container. Your terminal prompt will change to:

root@your-machine:/app#

Step 10 — Login to Zoho Catalyst

catalyst login

A browser window will open automatically
Log in with your Zoho account
Once logged in, return to the terminal — it should confirm successful authentication

Step 11 — Initialize Your Project

catalyst init

Follow the prompts to:

Select your Zoho organisation
Select or create a Catalyst project
Choose your project directory

Daily Workflow

Every time you want to work on your Catalyst project:

# 1. Navigate to your project folder
cd ~/projects/catalyst

# 2. Start the container
docker compose run catalyst

# 3. Login
catalyst login

# 4. Work on your project
catalyst init     # first time only
catalyst serve    # start local dev server

Project Structure Reference

~/projects/catalyst/
├── Dockerfile            ← defines the container environment
├── docker-compose.yml    ← defines how the container runs
└── catalyst-cli.tar      ← portable reusable image (move to storage)

Troubleshooting

Issue	Cause	Fix
`catalyst login` hangs	OAuth callback port not reachable	Ensure `network_mode: host` is in `docker-compose.yml`
`ERR_EMPTY_RESPONSE` in browser	Port not mapped correctly	Use `--network host` or `network_mode: host`
`docker: command not found`	Docker not installed	Redo Step 2
`permission denied` running Docker	User not in docker group	Run `sudo usermod -aG docker $USER && newgrp docker`

Guide based on Ubuntu via WSL2 on Windows. Last updated March 2026.

DEV Community: Silly Coder

Adding Cloudflare Turnstile to Zoho Form HTML Exports

What we're building

Prerequisites

Step 1 — Get a Cloudflare Turnstile Site Key

Step 2 — Add zoho-turnstile.js to your form export

Step 3 — Initialise the library

Step 4 (optional) — Add server-side verification via Cloudflare Worker

Create the Worker

Add environment variables

Point the form at the Worker

Pass verifyUrl to the init call

Options reference

Methods

Testing

Troubleshooting

Zoho Catalyst CLI — Docker Setup Guide

Prerequisites

Step 1 — Open Ubuntu via WSL

Step 2 — Install Docker on Ubuntu

Step 3 — Create Your Project Structure

Step 4 — Create the Dockerfile

Step 5 — Create the Docker Compose File

Step 6 — Build the Docker Image

Step 7 — Export the Image as a Reusable File

Step 8 — Loading the Image on a New Machine

Step 9 — Run the Container

Step 10 — Login to Zoho Catalyst

Step 11 — Initialize Your Project

Daily Workflow

Project Structure Reference

Troubleshooting

Step 2 — Add `zoho-turnstile.js` to your form export

Pass `verifyUrl` to the init call