Configuring UTM fields with Embedded Web Forms

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?
0 out of 0 found this helpful

Table of Contents