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://cdn.closetrace.com/t.js"
  data-site="YOUR_SITE_ID"
  data-capture-forms="true"></script>

Replace YOUR_SITE_ID with the ID from your CloseTrace dashboard (Settings → Sites). The data-capture-forms="true" attribute is what flips on field-level capture — without it you get pageviews and session replay but no form draft recovery.

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 a POST to /c every few seconds. If t.js returns a 200 but /c never fires, the data-site attribute is likely wrong.
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, you'll need to allow cdn.closetrace.com and 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. Webflow auto-generated IDs change when you duplicate or rename, and CloseTrace uses the ID to tie drafts back to a form across 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, type your name and email, then close the tab without submitting. Within about a minute, that draft should appear in Lead recovery → Form drafts in the CloseTrace dashboard with the partial values and the session replay link attached.

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 in a strict privacy mode (Brave shields on aggressive, Safari Lockdown Mode, some corporate proxies) that blocks third-party storage. The session still records, but the draft sync skips. You'll see the replay; you won't see the typed values.

If either matters for your audience, session recording on its own still lets you watch what was typed. You just can't auto-email them.

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.