Webflow CAPTCHA App

The following tutorial will guide you on how to integrate the TrustCaptcha CAPTCHA solution into your Webflow website to protect it from bots and spam.

You should have already completed the following steps before you start to integrate TrustCaptcha into your Webflow website.

1. Read Get-Started: Get a quick overview of the concepts behind TrustCaptcha and the integration process in get started.

2. Existing CAPTCHA: If you don’t have a CAPTCHA yet, sign in or create a new user account. Then create a new CAPTCHA.

3. Existing Webflow website: You need a Webflow website in which you want to integrate TrustCaptcha.

The integration of TrustCaptcha takes place in two steps. First, the CAPTCHA widget is integrated into Webflow. In the second step, the result is evaluated on the server side and the next steps are determined.

Integrate the CAPTCHA widget quickly and easily into Webflow with the TrustCaptcha Designer Extension.

1. Install our TrustCaptcha extension from the official Webflow Marketplace.
2. Open your Webflow workspace in Webflow Designer and select a form into which you want to integrate the CAPTCHA widget.
3. Start the TrustCaptcha app under Apps → TrustCaptcha → Launch. Select Insert, set the site-key (required). You can find this key in your CAPTCHA settings. After that customise the CAPTCHA to your requirements and click on Insert into selected form.

You will now see a placeholder for the CAPTCHA widget in the Designer. The widget does not render in the Designer, but it does on the public website. Optionally, you can publish your website as an intermediate step and test the CAPTCHA widget in its public form. However, the server-side validation is still missing, which we will add next.

The video visually demonstrates the most important steps.

You can easily update existing CAPTCHA widgets in Webflow Designer with our app.

1. Select the CAPTCHA that you would like to update.
2. Open the TrustCaptcha app.
3. Select Update and click on Load selected Captcha.
4. Customise the CAPTCHA to your needs and then click on Update selected Captcha.

The CAPTCHA has now been updated. You can now optionally republish the website and view the updated CAPTCHA on the public website.

The video visually demonstrates the most important steps.

When the CAPTCHA widget is ready, it adds a hidden input field with the verification token to your form. This is transmitted to your backend when the form is submitted. With the help of this token, you can retrieve the verification result of the CAPTCHA from our server and determine how to proceed. Learn more about the TrustCaptcha concept.

You can retrieve the result from our servers using a simple REST API call. Learn more in result validation overview. Alternatively, you can use one of our ready-made libraries for backend integration. Currently, there are ready-made integrations for PHP, NodeJS, Python, Java, Kotlin, Ruby, Rust, Go, and .NET.

The following three code examples demonstrate the backend validation process for PHP, NodeJS and Python. Each example shows the receipt of the verification token, the retrieval of the verification result and the determination of the next steps based on this result.

<?php
/**
* Install:
*   composer require trustcomponent/trustcaptcha-php
*/

declare(strict_types=1);
error_reporting(E_ALL & ~E_DEPRECATED);

require __DIR__ . '/vendor/autoload.php';

use TrustComponent\TrustCaptcha\CaptchaManager;

const SECRET    = 'YOUR_SECRET_HERE';
const THRESHOLD = 0.50; // score ≤ threshold → likely human (0 ≈ human, 1 ≈ bot)

header('Content-Type: text/plain; charset=utf-8'); // plain text responses for this demo

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(405);
  exit("POST only\n");
}

  $token = $_POST['tc-verification-token'] ?? ''; // update this string if you renamed the field
  if ($token === '') {
  http_response_code(400);
  exit("Missing verification token\n");
}

  try {
  $result = CaptchaManager::getVerificationResult(SECRET, $token);
} catch (Throwable $e) {
  // TODO: network/config error
  http_response_code(500);
  exit("Captcha verification error: " . $e->getMessage() . "\n");
}

  $isHuman = ($result->verificationPassed === true) && ((float)$result->score <= THRESHOLD);

  if ($isHuman) {
  echo "OK: CAPTCHA passed (score={$result->score})\n"; // TODO: continue your logic
} else {
  http_response_code(403);
  echo "FAIL: CAPTCHA failed or score too high (score={$result->score})\n"; // TODO: handle failure
}

/**
* Install:
*   npm i express @trustcomponent/trustcaptcha-nodejs
*/
import express from "express";
import { CaptchaManager } from "@trustcomponent/trustcaptcha-nodejs";

const SECRET = "YOUR_SECRET_HERE";
const THRESHOLD = 0.50; // score ≤ threshold → likely human (0 ≈ human, 1 ≈ bot)

const app = express();
app.use(express.urlencoded({ extended: false })); // Webflow posts urlencoded by default

app.post("/verify", async (req, res) => {

  res.type("text"); // plain text responses for this demo

  const token = req.body["tc-verification-token"]; // update this string if you renamed the field
  if (!token) return res.status(400).send("Missing verification token\n");

  let result;
  try {
    result = await CaptchaManager.getVerificationResult(SECRET, token);
  } catch (err) {
    // TODO: network/config error
    return res.status(500).send(`Captcha verification error: ${(err).message}\n`);
  }

  const isHuman = result.verificationPassed === true && result.score <= THRESHOLD;

  if (isHuman) {
    return res.send(`OK: CAPTCHA passed (score=${result.score})\n`); // TODO: continue your logic
  } else {
    return res.status(403).send(`FAIL: CAPTCHA failed or score too high (score=${result.score})\n`); // TODO: handle failure
  }
});

app.listen(8080, () => console.log("Listening on http://localhost:8080"));

"""
Install:
  pip install flask trustcaptcha
"""
from flask import Flask, request, Response
from trustcaptcha.captcha_manager import CaptchaManager

SECRET = "YOUR_SECRET_HERE"
THRESHOLD = 0.50  # score ≤ threshold → likely human (0 ≈ human, 1 ≈ bot)

app = Flask(__name__)

@app.post("/verify")
def verify():

  token = request.form.get("tc-verification-token")  # update this string if you renamed the field
  if not token:
    return Response("Missing verification token\n", status=400, mimetype="text/plain")

  try:
    result = CaptchaManager.get_verification_result(SECRET, token)
  except Exception as e:
    # TODO: network/config error
    return Response(f"Captcha verification error: {e}\n", status=500, mimetype="text/plain")

  is_human = (result.verificationPassed is True) and (result.score <= THRESHOLD)

  if is_human:
    return Response(f"OK: CAPTCHA passed (score={result.score})\n", mimetype="text/plain") # TODO: continue your logic
  else:
    return Response(f"FAIL: CAPTCHA failed or score too high (score={result.score})\n", status=403, mimetype="text/plain") # TODO: handle failure

if __name__ == "__main__":
  app.run(port=8080, debug=True)

Once you have successfully installed and configured TrustCaptcha on your website, you can use TrustCaptcha to its full extent. However, we still recommend the following additional technical and organizational measures:

• Security rules: You can find many security settings for your CAPTCHA in the CAPTCHA settings. These include, for example, authorized websites, CAPTCHA bypass for specific IP addresses, bypass keys, IP based blocking, geoblocking, individual difficulty and duration of the CAPTCHA, and much more. Learn more about the security rules.

• Data protection: Include a passage in your privacy policy that refers to the use of TrustCaptcha. We also recommend that you enter into a data processing agreement with us to stay GDPR-compliant. Learn more about data protection.

• Accessibility: Customize TrustCaptcha to your website so that your website is as accessible as possible and offers the best possible user experience. More about accessibility.

• Testing: If you use automated testing, make sure that the CAPTCHA does not block it. Learn more about testing.