Add CloseTrace to a Webflow Site (With Form Recovery)

A Webflow contact form looks fine in the Designer, publishes cleanly, and still loses leads. The submit hits, the success state shows, and the email never lands in your inbox — or worse, a visitor types out a 200-word project brief, taps away to check their calendar, and the field state evaporates on return. Webflow's native form submissions panel tells you what came through. It tells you nothing about what got typed and abandoned.

This post walks through adding CloseTrace to a Webflow site, then turning on form drafts so you can recover those half-typed submissions. Plan on about 20 minutes if you have publish access. Longer if you have to chase down the Webflow site admin.

Drop the snippet into Webflow's head code

CloseTrace ships as a single async script. You paste it once into the global head, publish, and the tracker loads on every page on the site.

In Webflow, open Site settings → Custom code → Head code. Paste this:

<script async src="https://api.closetrace.com/t.js?k=ct_pk_YOUR_PUBLIC_KEY"></script>

Replace ct_pk_YOUR_PUBLIC_KEY with the public key shown in Dashboard → Settings → Setup, or copy the complete server-generated snippet from there. Standard forms and form drafts are detected automatically; there is no data-capture-forms switch in the embed.

Hit Save changes, then publish the site to your live domain. Custom code does not run on the .webflow.io staging URL by default unless you also paste the snippet under Site settings → Custom code → Footer code → Test — most teams skip that and verify on the published domain instead.

If you're on the Webflow free plan, custom code in Site settings is locked behind a paid site plan. Page-level custom code works on free plans, but you'd have to paste the snippet on every page individually. Not worth it past three pages.

Verify the tracker is firing

Before you celebrate, confirm CloseTrace actually sees traffic. Open your published site in an incognito window, click through two or three pages, then submit nothing — just leave.

In the CloseTrace dashboard, open Live → Active sessions. Your incognito visit should show up within 10–20 seconds with the page path, country, and browser. If it doesn't, the three things to check, in order:

1. View source on the published page and search for t.js. If it's missing, the snippet didn't save — check that you pasted into Head code, not Footer code.
2. Open the browser devtools Network tab and filter for closetrace. You should see one request to t.js and periodic POST requests to /collect. If t.js returns 200 but collection never fires, verify the k=ct_pk_... query value and saved domain.
3. Check your site's content security policy. Webflow doesn't add a strict CSP by default, but if you've added one via reverse proxy or Cloudflare, allow scripts and connections to api.closetrace.com.

Turn on form draft capture for the contact form

This is the part that matters. The base snippet captures sessions. Form drafts need one more thing: the form has to be addressable.

In the Webflow Designer, select your form element. Open the Element settings panel (the gear icon, right side). Give the form a stable ID — something like contact-form, not the default wf-form-Contact-Form-2. A stable identifier keeps form analytics and draft updates consistent for that form; drafts are stored per active session, not merged across different sessions.

While you're there, give each input a clear name attribute. Webflow defaults to Name, Email, Message which is fine. What kills attribution is when somebody renames a field in the Designer and forgets the name is still the old string — your drafts dashboard then shows fields labeled Email-2 and you can't tell what they were.

Republish. Open the form in incognito, interact with the name and email fields, then close the tab without submitting. The interaction should appear in Lead Recovery with its session link. Supported partial values appear only when the active workspace capture policy permits them.

A useful filter: "started typing, never submitted, within 24 hours"

Once drafts are flowing, the dashboard view I'd actually check daily is filtered to:

• Form ID: contact-form (or whatever you named it)
• Status: abandoned (typed in at least one field, no submit event fired)
• Email field: is not empty (so you have a way to follow up)
• Started: last 24 hours

That filter, saved as a segment, is the difference between "we have session replay" and "we recover leads." It's the same logic covered in the complete guide to lead recovery, just applied to a Webflow form specifically. Most teams I've seen install a tracker, scroll through replays for a week, then forget about it. The saved segment makes it a daily check, not a project.

One honest caveat

Form drafts work because CloseTrace persists field values in the visitor's browser and syncs them on the next ping. Two situations break this:

1. The visitor types the entire form in under two seconds and closes the tab before the first sync. Drafts have a debounce window — roughly 1.5 seconds — so very fast typists on simple forms occasionally fall through. Not common, but it happens.
2. The visitor is using a privacy tool or corporate proxy that blocks requests to the CloseTrace API. In that case neither the session nor the draft can reliably reach the dashboard.

Replay input values follow the active workspace privacy policy. You can still see interaction and validation behavior without exposing permanently excluded sensitive fields.

Next: write the recovery email template

Now that drafts are landing in the dashboard, the bottleneck isn't capture — it's what you send them. Open a new doc, draft a four-line follow-up email that references the page they were on, then plug it into whatever sequence tool you're already using. Aim to send within four hours of abandonment, before the intent fades.