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:
<iframe src="https://info.accountengagement.com/l/1997292/2023-04-26/7vvm" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
This is the form's URL altered with a Salesforce campaign ID:
<iframe src="https://info.accountengagement.com/l/1997292/2023-04-26/7vvm&campaign=7014y000000usUfAAI" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
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.
This is because your iframes have the potential of being rewritten as follows:
<iframe data-src="https://info.accountengagement.com/l/1997292/2023-04-26/7vvm" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></iframe>
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.
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.