How to prevent lazy loading from messing with your iframe embedded forms

Sometimes I come across these edge cases where a solution is discovered to an obscure or tricky problem, and I just have to share it, because if there's even just one person out there that this article saves hours of headache, it was worth my 15 minutes to write it.

Here's the problem in a nutshell. If you are using iframe embedded Account Engagement (Pardot) forms, one nice trick that you can use is embedding variables on the url in that iframe, it will fill in hidden (or visible) fields on your form. Here's a simple example.

This is the original form:

This is the form's URL altered with a Salesforce campaign ID:

The use case here might be that we use the same form on multiple locations and want to use the campaign ID to identify a specific campaign that the form in that location is associated with.

There are other tools out there like UTMGrabber (for Wordpress) and UTMSimple (for anything else) that will dynamically insert variables onto the URL such as UTMs or referral links that are held in the first party cookie, which means that you can feed all kinds of useful data into your hidden fields.

This is all well and good, and works beautifully....until it doesn't.

If your site has a plugin or javascript running that is intended for lazy-loading of site images, it has the potential to wreak havoc with your hidden field strategy, especially if you are dynamically generating the variables on the URL.

This is because your iframes have the potential of being rewritten as follows:

What's happening here is that the actual URL is being renamed as data-src and the src is replaced by a base64 encoded 1x1 gif image. The effect of this is that the dynamic URL components get tacked onto the URL with the gif image. And then the javascript you use on the form to parse the URL variables (javascript that you probably got from here), well, it just won't work, because the URL it's trying to parse is not a normal URL.

<scripttype="text/javascript">// Parse the URLfunction getParameterByName(name){ name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");var regex =newRegExp("[\\?&]"+ name +"=([^&#]*)"), results = regex.exec(location.search);return results ===null?"": decodeURIComponent(results[1].replace(/\+/g," "));}// Give the URL parameters variable namesvar source = getParameterByName('utm_source');var medium = getParameterByName('utm_medium');var campaign = getParameterByName('utm_campaign');// Put the variable names into the hidden fields in the form. document.getElementsByName("utm_source").value = source; document.getElementsByName("utm_medium").value = medium; document.getElementsByName("utm_campaign").value = campaign;</script>

So, there's a good bit of information to try and help you observe the problem. You can see all of this using the "inspect element" feature of your browser on a live page. This is a super useful feature to see if hidden fields are behaving the way you expect.

How to fix the problem if you observe it? There are various potential causes. Here are some things to check.

Talk to your web developer if they are using any site-wide plugins or add-ons, or javascript libraries to universally apply lazy loading to the site.
See if there's a way to exclude iframes from the tool's lazy loading settings.
If using utm grabber or utm simple, try to exclude the class utm-src that the tool uses to manage it's dynamic additions to the URL.

Good luck! I hope this helps at least 1 person.