Fixing Query Params & Tracking for Embedded GHL Forms & Surveys
This guide provides a solution for fixing query params and UTM tracking for High Level forms & surveys embedded in other websites.
If your GHL forms are already correctly populating from query params, then you probably don't need this fix.
But you may want to use the code below to send in custom tracking data not set in query params.
The code is provided at the end of this article for free to our newsletter members. Subscribe (for free) to access the code.
The Problem: old GHL embed code and some Wordpress Plugins like LazySizes break query params tracking for embedded GHL widgets.
When a GHL form or survey is embedded in another site, two things happen on the "host" page (where the form is embedded):
- The form or survey iframe is loaded on the page
- GHL's form_embed.js script is loaded
The form_embed.js script handles passing query params and sticky contacts to the embedded form. It also resizes the iframe to match the size of the form, making the form appear as part of the host page.
When everything works as expected, query params including tracking data (UTM params, gclid, fbclid, etc.) are successfully passed to the embedded form. The form then uses the query params to populate fields in the form, including hidden fields that track UTM parameters by default.
When the form_embed.js code isn't working properly, the embedded form will lose all tracking data. This can happen when using old GHL embed code. GHL periodically updates form_embed.js. This updates for all embedded GHL widgets, even ones there were generated years ago. There's always a possibility GHL accidentally introduces a bug that makes form_embed.js incompatible with really old embedded forms or surveys.
The form_embed.js code can also stop working properly when a GHL form is embedded in a website that changes the embed code. This often happens with Wordpress plugins. For example, the LazySizes Wordpress plugin changes GHL iframes to only load when scrolled into view on a Wordpress page. It turns out the way LazySizes works is incompatible with GHL's form_embed.js code for passing query params to the embedded form.
An easy way to test if everything is working properly is to add a query param for a field in the embedded form. e.g. add [email protected] to the Wordpress page URL. If the email field in the form gets set to [email protected], then form_embed.js is working properly. If not, then it almost certainly means query params, sticky contacts, and tracking data is broken for your embedded form.
To fix this, we created a script you can add to your page.
The script fixes common incompatibility errors like the LazySizes issue described above.
It also makes it easy to pass in custom data to your embedded GHL form or survey via a single line of javascript code. This enables you to programmatically pass data into your form that's not set in the page URL query parameters. You can also use it to override the query param data.