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.
The Pardot Code Explained
First let’s look at the code in question from the source:
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:
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:
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!