Form Integrations

AttributionHub automatically detects and populates forms from 20+ platforms. No additional code is required — add hidden fields to your form, and the script fills them with attribution data.

How Form Population Works

AttributionHub uses a two-tier architecture for form population:

1. Standard forms handler — a universal handler that discovers all <form>, .form, [role="form"], and [data-form] elements on the page and populates their hidden fields. This covers the majority of platforms.
2. Specialized handlers — dedicated handlers for platforms that use iframes, SDK APIs, or cross-origin messaging. These run first and mark populated forms so the standard handler skips them.

The population flow on every page load:

1. Specialized handlers run first (HubSpot iframes, Marketo SDK, Pardot, ActiveCampaign, Calendly, Typeform, Zoho, Jotform, Webflow, Contact Form 7)
2. Each specialized handler marks forms it populates with data-attrhub-populated
3. The standard forms handler runs last, skipping any already-populated forms
4. A retry fires after ~500 ms for late-loading forms
5. A MutationObserver watches for dynamically inserted forms (SPA support)

All handlers honour your field mapping — no handler hardcodes field names.

Standard Forms (Universal Handler)

Works with any platform that renders standard <form> + <input> elements in the page DOM. Add hidden fields with names matching your field mapping:

<form action="/submit" method="POST">
  <!-- Your visible form fields -->
  <input type="text" name="name" placeholder="Your Name" />
  <input type="email" name="email" placeholder="Email" />
 
  <!-- Attribution hidden fields -->
  <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" />
 
  <button type="submit">Submit</button>
</form>

Platforms Covered by Standard Forms

Because these platforms all render standard <form> and <input> elements, they work out of the box with no dedicated handler:

For frameworks like React, Angular, and Vue, the script dispatches both change and input events to trigger framework reactivity. No special configuration is needed.

Custom Form Selectors

If your form platform uses non-standard containers, you can extend the default selectors:

window.attrhub = {
  settings: {
    formSelectors: [
      ".gform_wrapper form",
      ".mc-embedded-subscribe-form",
      'form[action*="pipedrive.com"]',
      ".payload-form",
    ],
  },
};

Custom selectors are merged with the defaults (form, .form, [role="form"], [data-form]) and deduplicated. See Configuration for details.

Specialized Handlers

The following platforms require dedicated handlers because they use iframes, SDK APIs, or cross-origin messaging that the standard handler cannot reach.

HubSpot (Iframe Embeds)

HubSpot forms embedded via <script> tags that render inside cross-origin iframes are handled by a dedicated handler. It appends attribution data as URL parameters on the iframe src.

1. In HubSpot, go to Properties > Create property
2. Create properties matching your field mapping names (e.g., ah_lt_channel, ah_lt_source)
3. Add these properties as hidden fields in your HubSpot form
4. AttributionHub detects HubSpot iframes (iframe[src*="hsforms.com"], iframe[src*="hubspot.com"]) and injects the data

Non-iframe HubSpot forms (.hbspt-form) are handled by the standard handler.

Marketo (SDK and Iframe)

The Marketo handler covers two integration paths:

1. MktoForms2 SDK — if window.MktoForms2 is present, the handler uses MktoForms2.whenReady() and mktoForm.addHiddenFields() to inject attribution via the official API
2. Iframe embeds — attribution data is appended as URL parameters on the iframe src

Standard Marketo forms (.mktoForm) in the page DOM are handled by the standard handler.

Salesforce Pardot

Pardot forms are typically embedded as cross-origin iframes on pardot.com or salesforce-sites.com subdomains. The handler detects these iframes and injects attribution data as URL parameters.

Detected selectors: iframe[src*="pardot.com"], iframe[src*="go.pardot.com"], iframe[src*="salesforce-sites.com"].

Pardot form handler pages rendered as inline <form> elements are handled by the standard handler.

ActiveCampaign (Iframe Widget)

ActiveCampaign offers two embed modes:

• Standard embed (inline HTML forms) — handled by the standard handler
• Iframe widget mode (floating widget / modal forms on activehosted.com) — handled by this dedicated handler, which injects URL parameters on the iframe src

Calendly

Calendly widgets render inside iframes, so form fields inside them are inaccessible. The dedicated handler listens for calendly.event_scheduled postMessage events from the Calendly iframe and captures conversion data including:

• All attribution fields from your field mapping
• calendly_event_uri and calendly_invitee_uri

Requires the Calendly embed SDK (window.Calendly).

Typeform

For Typeform embedded forms:

1. In your Typeform, go to Logic > Hidden Fields
2. Add fields with names matching your field mapping
3. The script populates hidden fields via data-tf-hidden attributes and iframe hash parameters

Zoho Forms

Zoho forms embedded via iframes are detected and populated with URL parameters. Add hidden fields in your Zoho Form with matching field names.

Jotform

Jotform embeds are cross-origin iframes hosted on jotform.com. The handler detects iframe[src*="jotform.com"] and appends attribution data as URL parameters.

Jotform’s rare “source code” embed mode (standard <form> elements) is handled by the standard handler.

Webflow

Webflow forms use standard <form> elements, so field population is handled by the standard handler. The dedicated Webflow handler adds conversion tracking for Webflow’s fetch-based form submission, which bypasses the normal submit event flow.

The handler watches for Webflow’s .w-form-done success indicator becoming visible after submission and fires conversion tracking.

Contact Form 7 (WordPress)

CF7 forms are standard .wpcf7-form elements, so field population is handled by the standard handler. The dedicated handler listens for CF7’s wpcf7mailsent custom DOM event to capture AJAX-based submissions for conversion tracking.

Add hidden fields to your CF7 form template:

[hidden ah_lt_channel]
[hidden ah_lt_source]
[hidden ah_lt_medium]
[hidden ah_lt_campaign]
[hidden ah_lt_landing_url]
[hidden ah_ft_channel]
[hidden ah_ft_source]
[hidden ah_visitor_id]

Custom Field Mapping

All handlers honour settings.fieldMapping. If your form uses different field names, override the defaults:

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

This maps AttributionHub’s internal field paths to your custom form field names. See Configuration for the full path reference.

Not Supported

Some platforms cannot be integrated due to fully isolated cross-origin restrictions:

Troubleshooting

Fields not being populated

1. Timing issue — the form might load after the script runs. AttributionHub retries after ~500 ms and watches for DOM changes, but if your form loads very late, it may be missed.
2. Field name mismatch — ensure field names exactly match (case-sensitive). Use browser DevTools to inspect the field name attribute.
3. Platform not detected — if your form platform uses a non-standard container, add its CSS selector via formSelectors in your settings.
4. Enable logging — set enableLogging: true in settings and check the browser Console for population messages.

Double population

AttributionHub prevents double population by stamping populated forms with data-attrhub-populated. If you see duplicate values, check that you are not manually calling the script’s population function in addition to the automatic flow.

Values not persisting on submit

Some form platforms clear field values before submission. Check if your form platform has a “preserve hidden field values” option. Webflow’s fetch-based submission is handled by a dedicated conversion tracker.

SPA navigation issues

AttributionHub watches for DOM changes via MutationObserver. Forms that are dynamically inserted into the page are automatically detected and populated. Already-populated forms are skipped on re-detection.