Caputchin

Webflow

查看 Markdown

Caputchin drops onto a Webflow site with custom code. There is no marketplace app to install: you add the widget the same way you add any third-party script, and wire it to your form. The full widget and the games both work.

1. Load the widget

Open your project's Site Settings → Custom Code, and paste the loader into the Head Code field:

<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>

The @3 pins the current major version, so you get fixes and new games without a surprise breaking change. That one line registers the <caputchin-widget> and <caputchin-game> elements for the whole site. (See Client side integration for the npm option if your site has a build step.)

2. Place it on your form

In the Designer, add an Embed element (Add panel → Components → Embed) inside the <form> you want to protect, and put the widget in it. Use your public site key from the dashboard:

<caputchin-widget sitekey="cpt_pub_..." trigger="form-submit"></caputchin-widget>

trigger="form-submit" runs the check when the form is submitted and gates the submit until it passes. On a pass, the widget injects a hidden <input name="caputchin-token"> into the enclosing form, which your verification step reads.

For a game instead of the checkbox, use <caputchin-game>:

<caputchin-game sitekey="cpt_pub_..." game="caputchin/games/leaf-memory" layout="inline"></caputchin-game>

3. Verify the token

The widget proves a human passed in the browser; you still confirm the token server-side before trusting the submission. Pick the mode that fits your setup.

Open the form's settings in the Designer, set Send to → Custom action, and point it at your endpoint. Your server reads the caputchin-token field and confirms it with /siteverify. See Server side integration and Migrate from reCAPTCHA for the exact server call.

Caputchin hosted verification (no backend)

If you do not run a server, point the form's Custom action at your hosted-verification forwarder URL from the dashboard. Caputchin verifies the token and delivers the submission to your webhook or email. This is a paid feature, and it replaces Webflow's native submissions inbox (the form posts to Caputchin instead of Webflow). See Hosted verification.

Client gate (a deterrent, not server-verified)

Leave the form on Webflow's native handler and rely on trigger="form-submit" to block submit until the check passes. This raises the bar for bots but is not a server-verified guarantee, so use it only where that is acceptable.

本页内容