Pardot – Passing variables to iframes using a new approach

by Benjamin Murrayin Marketingon Posted on

In my time as a marketer using various different platforms, I often come across perplexing issues that just make me shake my head. One of them is the continued reliance on incorporating iframes into HTML markup when it often restricts layout or coding options by having that content included on your page. While there are many better options to having forms included on your pages from plugins to using templates from frameworks and just replacing the form action, there are times when many find themselves stuck without any recourse. Case in point, Pardot forms.

I’ve recently come across many users who have struggled to use iframes within their content. They run into issues ranging from the form is rendering in the wrong location due to the javascript or they run into issues because iframes are inherently not responsive. Let’s look at both of these examples.

The Pardot Code Explained

First let’s look at the code in question from the source:

<noscript>
 <iframe src="PARDOT_FORM_URL" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>

<script type="text/javascript">
 var form = 'PARDOT_FORM_URL';
 var params = window.location.search;
 var thisScript = document.scripts[document.scripts.length - 1];
 var iframe = document.createElement('iframe');

 iframe.setAttribute('src', form + params);
 iframe.setAttribute('width', '100%');
 iframe.setAttribute('height', 500);
 iframe.setAttribute('type', 'text/html');
 iframe.setAttribute('frameborder', 0);
 iframe.setAttribute('allowTransparency', 'true');
 iframe.style.border = '0';

 thisScript.parentElement.replaceChild(iframe, thisScript);
</script>

What happens here to put this in plain-English terms is we start with a “noscript” area. When Javascript is not enabled in the end-user’s browser, the noscript code be displayed. When Javascript is enabled, the noscript code is ignored and we are left with the script below it. What happens next is the form’s action, or post URL, and parameters (params) are gathered so that the iframe URL can be generated. These are the values you will see in the browser after the “?”. We can ignore “thisScript” as it is referencing the script itself, to be used later. The last var being set is “iframe” which creates the element of an iframe on your page using javascript.

Below all of that are just attributes of the iframe tag, similar to the iframe that is between the “noscript” tag. And the final piece of the puzzle is the statement beginning with “thisScript” whose intention it is to replace the existing script area with the Pardot iframe code, practically identical to what is in the “noscript” tag above.

The Brief Code

An example of a quicker and cleaner way to write this would be:

<iframe src="PARDOT_FORM_URL" id="pardotform" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>

<script type="text/javascript">
 var form = 'PARDOT_FORM_URL';
 var params = window.location.search;
document.getElementById("pardotform").setAttribute("src", form + params);
</script>

Let’s take a closer look at what really changed in this much shorter example. First, we do away with the “noscript” because if the element is on the page it will load regardless. But we also add an “id” to the iframe because we will need it in the javascript. Next, we remove everything from the javascript except for the form post URL and the parameters. Then instead of re-writing the entire iframe statement in javascript, we just re-write the src attribute of the iframe on the page.

Creating the Responsive iFrame

While we have shortened the code dramatically, we still do not have an iframe code that is responsive. So in the example above, our iframe will stay at its defined height. We will use the example of the Bootstrap framework for our example.

Bootstrap Responsive iFrames

When looking up responsive iframes in Bootstrap, it is important to know they are listed in the documentation as embeds. With responsive embedded objects, you have a choice of embedding in one of four aspect ratios:

  • 21:9
  • 16:9
  • 4:3
  • 1:1

As Pardot forms are not designed for TV/monitor resolutions, we can just use the 1:1 for our example.

<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="PARDOT_FORM_URL" id="pardotform"></iframe>
</div>

Using this example, by including the surrounding div classes and adding a class to the iframe used by Pardot, we can then simply add in the “src” variable to what Pardot provides you. And there you have it. A cleaner way to pass variables into a Pardot iframe and also make the iframe responsive!