SourceTag

Troubleshooting

Forms in Popups and Modals

Many sites use popup or modal forms for lead capture, newsletter signups, exit-intent offers, and contact forms. SourceTag is designed to handle these, but there are a few things to be aware of.

How SourceTag detects popup forms

SourceTag uses a MutationObserver to watch for new elements added to the page after the initial load. When a popup plugin injects a form into the DOM, the observer detects it and processes the form (adding hidden fields and populating them with attribution data).

This works automatically for most popup builders, including:

  • Elementor Popups
  • OptinMonster
  • Popup Maker
  • ConvertBox
  • Thrive Leads
  • WPForms modal embeds
  • Custom JavaScript modals

When it might not work

The form HTML is already in the page (just hidden)

Some popup builders pre-load the form HTML when the page first renders and simply toggle its visibility with CSS when the popup opens. In this case, the MutationObserver doesn’t fire because no new elements were added to the DOM.

This is actually fine. SourceTag processes all forms it finds on the initial page load, including hidden ones. The hidden fields will already be populated before the popup ever opens.

How to check: Open the browser developer tools before triggering the popup. Search the Elements panel for <form>. If you can see the popup’s form already in the HTML (even if it’s hidden with display: none or visibility: hidden), SourceTag has already processed it.

The popup loads before SourceTag

If the popup form is injected into the page before the SourceTag script has finished loading, the MutationObserver won’t be set up yet to detect it.

This is uncommon, since SourceTag loads early with the async attribute and popups typically appear after a delay. But it can happen if:

  • The script is deferred or delayed by a caching plugin
  • The popup triggers immediately on page load (e.g. a welcome mat)

Solution: Make sure the SourceTag script tag is placed high in the <head> section and is not deferred or delayed by caching plugins. See Caching and Speed Plugin Issues for exclusion instructions.

The form is inside an iframe

If the popup loads the form from a different domain inside an iframe (common with some embedded form tools like Zoho), SourceTag cannot access it directly. Browser security prevents JavaScript on your domain from interacting with content inside a cross-origin iframe.

Solution 1: Use data-st-iframe. Add a data-st-iframe attribute to the iframe element. SourceTag will append attribution data as URL parameters to the iframe’s src, which the form tool can then read.

<iframe data-st-iframe src="https://forms.zoho.com/your-form"></iframe>

Solution 2: Use data-st-set. Add data-st-set attributes to pre-existing hidden fields to have SourceTag populate them with specific values.

<input type="hidden" name="source" data-st-set="st_fc_channel">

Solution 3: If the form tool supports it, use an inline embed rather than an iframe embed. Or use the form tool’s native hidden field feature and populate the fields via the JavaScript API.

Testing popup forms

  1. Visit your site with UTM parameters:
?utm_source=test&utm_medium=cpc&utm_campaign=popup-test
  1. Open the browser developer tools (F12 or Cmd+Option+I)
  2. Trigger the popup (click the button, wait for the timer, scroll, or whatever trigger you’ve configured)
  3. In the Elements panel, find the popup’s <form> element and expand it
  4. Look for hidden input elements with name attributes starting with st_
  5. Check that the value attributes are populated (e.g. st_fc_channel should have a value like “Paid Search”)

[IMAGE: Screenshot of browser developer tools showing a popup form with SourceTag hidden fields populated]

If the hidden fields are present but empty, the form was detected but the attribution data wasn’t available at the time. Check that the cookie exists (Application > Cookies > _sourcetag).

If the hidden fields are not present at all, the form wasn’t detected. Check whether the form uses a standard <form> element and whether it’s loaded inside an iframe.

Popup builders with non-standard forms

Some popup builders render what looks like a form but don’t use a standard <form> HTML element. They might use a <div> with JavaScript click handlers instead.

If your popup builder does this, you have two options:

  1. Set a custom form selector in Advanced Mode on the Fields page in the SourceTag dashboard. This tells the script to look for a specific CSS selector instead of <form> elements.
  2. Use the JavaScript API to read attribution data and pass it to the form programmatically. See JavaScript API for details.

Further reading