Skip to main content
Zenovay
Free6 minutesBeginner

Webflow: setting up Zenovay on a Webflow form-submission goal

Track form submissions on a Webflow site as Zenovay goals. Two approaches — the simple URL-match goal and the more reliable custom-event approach.

webflowintegrationsformsgoals
Last updated:

Webflow forms can be tracked as Zenovay goals using one of two approaches. Pick the one that matches your form's redirect behaviour.

Step 0 — Install the tracker

If you haven't yet, paste the Zenovay tracking script into Project Settings → Custom Code → Head Code in Webflow:

<script
  src="https://api.zenovay.com/_z/script.js"
  data-tracking-code="YOUR_TRACKING_CODE"
  defer
></script>

Publish the site and confirm in your Zenovay dashboard that pageviews are flowing.

Approach 1 — URL-match goal (simple)

Use this when your form redirects to a thank-you page after submission.

  1. In Webflow, set the form's Form Settings → Redirect URL to a unique success page, e.g. /contact-thanks.
  2. In Zenovay, go to Goals → Create goal.
  3. Pick URL match as the goal type.
  4. Pattern: /contact-thanks (or whatever you set as the redirect).
  5. Save.

Every visit to the thank-you page now counts as a conversion. This is the simplest and most reliable approach.

Approach 2 — Custom event (no redirect)

Use this when your form stays on the same page and shows an inline success message.

Webflow exposes a global event when a form succeeds: form_submit_success. Add this to Project Settings → Custom Code → Footer Code:

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', () => {
      // Webflow validates client-side; the success message appears after AJAX completes.
      // We listen for the success block becoming visible.
      const successEl = form.parentElement.querySelector('.w-form-done');
      if (!successEl) return;

      const observer = new MutationObserver(() => {
        if (successEl.style.display !== 'none' && successEl.offsetHeight > 0) {
          window.zenovay && window.zenovay('form_submitted', {
            form_id: form.getAttribute('data-name') || form.id || 'unknown'
          });
          observer.disconnect();
        }
      });
      observer.observe(successEl, { attributes: true, childList: true, subtree: true });
    });
  });
});
</script>

Then create a custom-event goal in Zenovay:

  1. Goals → Create goal → Custom event.
  2. Event name: form_submitted.
  3. (Optional) Filter on a specific form_id to track one form at a time.

Verifying it works

Submit the form on your live site. Within ~30 seconds:

  • The pageview to /contact-thanks (Approach 1) or the form_submitted event (Approach 2) should appear in Live → Events.
  • The goal counter should tick up under Goals → [Your goal name].

Common pitfalls

  • Form fails validation — Approach 1 won't fire because there's no redirect. Approach 2 won't fire because the success block stays hidden. This is correct behaviour — you only want successful submissions counted.
  • Webflow CMS forms — same approach works; the data-name attribute may differ from the form name in the editor.
  • Multiple forms on one page — both approaches handle this. Use the form_id property in Approach 2 to distinguish them in the dashboard.

Was this article helpful?