Configuring UTM fields with Embedded Web Forms

1 min read

For UTM fields to be populated on lead records, after being submitted via a web form, UTM fields need to be configured within the URL with the first parameter as a '?' and every other following field will need an '&' symbol. 

The verbiage will be captured by the text after the '=' sign.

For example, UTM fields that populate for UTM Campaign, UTM Source, and UTM Medium would look like this in the URL:

 ?utmcampaign=FranchiseLeadt&utmSource=LinkedIn&utmMedium=Social.

Additionally, JavaScript code will need to be added and the iframe updated on the customer's end.

When using an embedded form, the iframe lacks the context of the URL, so a script must be added to provide that context.

Note

it is important that the script go after the iframe tag.

The script would need to appear similar to this:

<iframe id='myFrame' frameborder='0' width='100%' height='750' title='FranDev Site Form'></iframe>

<script>
   // Step 1: Parse URL parameters
   const params = new URLSearchParams(window.location.search);

   // Step 2: Build query string to append to iframe
   const queryString = params.toString();

   // Step 3: Set the iframe source dynamically
   const iframe = document.getElementById("myFrame");
   const baseURL = "FORM URL"; // target iframe page
   iframe.src = queryString ? `${baseURL}?${queryString}` : baseURL;
</script>

The form URL from the build/site would need to be pasted into the baseURL line of the code.

Ensure that the existing Iframe call is also replaced. 

Was this article helpful?
Your feedback helps us improve our documentation.