Webflow

Webflow is a popular no-code website builder that makes it easy to design and publish responsive websites. Webflow includes a native form builder that renders standard HTML <form> elements on the page.

Because Webflow forms are standard HTML, field population is handled automatically by AttributionHub’s standard forms handler. However, Webflow has a unique characteristic: it submits forms via fetch() rather than a traditional form submission. This means the browser does not navigate to a thank-you page, and the standard submit event flow is partially bypassed.

AttributionHub includes a dedicated Webflow handler that adds conversion tracking specifically for this fetch-based submission behavior. It ensures that form submissions are captured even though Webflow intercepts the normal submit flow.

Prerequisites

Before you begin, make sure:

• The AttributionHub tracking script is installed on your site (see Installation)
• You have a Webflow project with at least one form
• You have access to the Webflow Designer to edit forms

Step 1: Add Hidden Fields in the Webflow Designer

1. Open your project in the Webflow Designer
2. Select the form block you want to add attribution tracking to
3. For each attribution field, add a hidden field:
   • From the elements panel, drag an Embed element into your form (inside the form block, before the submit button)
   • In the embed code editor, paste the hidden input HTML:

     <input type="hidden" name="ah_lt_channel" />
     <input type="hidden" name="ah_lt_source" />
     <input type="hidden" name="ah_lt_medium" />
     <input type="hidden" name="ah_lt_campaign" />
     <input type="hidden" name="ah_lt_landing_url" />
     <input type="hidden" name="ah_ft_channel" />
     <input type="hidden" name="ah_ft_source" />
     <input type="hidden" name="ah_visitor_id" />

   • Click Save & Close on the embed element
4. Publish your site to make the changes live

Alternatively, you can add individual hidden fields using Webflow’s built-in form field settings:

1. Add a text input field to your form
2. In the field settings, set the Type to Hidden (or use a custom attribute)
3. Set the Name to the AttributionHub field name (e.g., ah_lt_channel)

Step 2: Publish and Test

1. Publish your Webflow site
2. Visit a page with the form
3. Open your browser’s DevTools (F12)
4. In the Elements panel, find the form and inspect the hidden <input> elements — they should have attribution values populated
5. Submit a test form entry
6. In your Webflow project, go to the form submissions (CMS tab or site settings) and verify the attribution values appear

For a full testing walkthrough, see Verify It Works.

How It Works

Field Population

Webflow forms render as standard <form> elements inside .w-form wrappers. AttributionHub’s standard forms handler discovers them using the default form selector, finds hidden fields whose name attributes match your field mapping, and sets their values. No special detection is needed.

Conversion Tracking

This is where Webflow is unique. Webflow’s client-side JavaScript:

1. Listens for the form submit event
2. Calls preventDefault() to stop the browser from navigating
3. Submits the form data via fetch() to Webflow’s backend
4. On success, hides the form and shows the .w-form-done success message

Because the browser never navigates and preventDefault() is called, a simple onsubmit listener might miss the conversion. AttributionHub’s Webflow handler uses two strategies to capture the conversion:

Strategy 1: Submit event patch — The handler calls the conversion tracker on the form element, which patches the form’s onsubmit handler. Since Webflow fires the DOM submit event before calling preventDefault(), the conversion tracker runs before Webflow intercepts.

Strategy 2: MutationObserver on .w-form-done — As a fallback, the handler watches for Webflow’s success message element (.w-form-done) to become visible. When its display style changes from none to a visible state, the handler fires a webflow_fetch_submit conversion event. This catches cases where Webflow’s script bypasses the submit event entirely.

Recommended Hidden Fields

The table below lists the most commonly used fields. For the complete field catalog, see Field Reference.

Core Attribution Fields (Latest Touch)

Core Attribution Fields (First Touch)

Global Fields

For additional fields including latest-non-direct touch (ah_lnd_*), drill-down fields, raw UTM parameters, and ad click IDs, see the full Field Reference.

Custom Field Mapping

If your Webflow form uses different field names, override the defaults:

<script>
  window.attrhub = {
    settings: {
      fieldMapping: {
        "latest.attribution.channelGroup": "channel",
        "latest.attribution.source": "source",
        "latest.attribution.campaign": "campaign",
      },
    },
  };
</script>

See Configuration for the full mapping reference.

Adding the Script to Webflow

To add the AttributionHub script to your Webflow site:

1. In the Webflow Designer, go to Project Settings > Custom Code
2. In the Head Code section, add your AttributionHub configuration:

   <script>
     window.attrhub = {
       settings: {
         // your settings here
       },
     };
   </script>

3. In the Footer Code section (or also in Head Code), add the AttributionHub script tag
4. Publish your site

You can also add the script per-page using a page’s custom code section if you only want attribution on specific pages.

Tips

• Webflow form notifications — Attribution values are included in Webflow’s email notifications for form submissions. You can see which channel a lead came from directly in the notification email.
• Zapier / Make integration — When connecting Webflow forms to external tools via Zapier or Make, hidden field values are included in the webhook payload. Map them to CRM fields for full attribution tracking.
• Webflow Memberships — If you use Webflow Memberships, the attribution fields in sign-up forms let you track which channels drive the most member registrations.
• Multiple forms on one page — AttributionHub handles all forms on the page. The conversion tracker is set up independently for each .w-form wrapper.
• Custom success actions — If you use custom JavaScript instead of Webflow’s default success message, the submit event strategy (Strategy 1) still captures the conversion.

Troubleshooting

Hidden fields are empty in form submissions

1. Verify the hidden <input> elements are inside the <form> element (not outside the form block).
2. Check that the name attribute on each hidden input matches the AttributionHub field name. Names are case-sensitive.
3. In DevTools, check the hidden input values before submitting — they should already contain attribution data.
4. Enable logging (enableLogging: true in settings) and check the browser Console.

Conversion not tracked

1. Make sure the form is wrapped in a .w-form element (Webflow does this automatically).
2. Check that the .w-form-done success message element exists as a sibling of the form (Webflow adds this by default).
3. If you use a custom success action that removes the form from the DOM, the MutationObserver strategy may not fire. The submit event strategy should still work in this case.

Embed element not rendering

Webflow’s Embed elements require a paid plan on some project types. If you cannot add an Embed element, use Webflow’s built-in form fields set to hidden type instead.