Refreshed and republished on October 4, 2020
This post was originally published on February 25, 2016 and has been revamped and updated for accuracy and comprehensiveness.Pardot offers 2 methods for embedding forms on your website; embedding using an iframe, and form handlers. While the embedded iFrame forms allow marketers to have control over updating and configuring the forms, using an iFrame isn’t always ideal for website usability. In this tutorial, I will show you how to take advantage of the Pardot iFrame forms and make it look great embedded on your website.
Why Use Embedded Pardot Forms?
Using Pardot forms over Pardot form handlers have many benefits including:
- Allowing for progressive profiling
- Built-in email validation
- The ability to use the drag and drop editor to modify form fields
- Add/remove form fields easily and have the changes show up on your website instantly
Embedding Pardot forms on your website
The problem
The embedded Pardot form (which is in an iFrame) has to have a set height. This means that when you embed the form you have to calculate the height (in pixels) and update the code Pardot provides accordingly.
Example
|
1 |
<iframe src="http://info.jennamolby.com/x/xxxxx/xxxxx/xxxx" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe> |
If you add any additional fields to the form, the height of the form will need to change. You also need to accommodate for the built-in validation messages which can cause the height of the form to change as well.
The solution
Automatically resize the iFrame using Javascript. Even if you’re not a developer, it’s pretty easy to implement since is just copy and paste.
Step 1: Add some code to your Pardot form
Navigate to your form in Pardot and paste this code in the look in feel section by clicking on the HTML icon.
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js" defer></script> |
Step 2: Download the plugin and add jQuery
Download this file and link the javascript on your website. Or link this hosted verison on your website like this and add the jQuery plugin.
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script> |
Step 3: Embed the form on your website
In order to embed the Pardot form on your website, you will need to grab the form URL from Pardot. Navigate to the form overview page and copy the link provided
Add this piece of code where you want the form to appear on the page. Replace the URL with the URL you copied above.
|
1 |
<iframe src="http://info.jennamolby.com/x/xxxxx/xxxx/xxxxx" width="100%" scrolling="no"></iframe> |
Lastly, add some custom javascript to your website to initiate the iFrame resizing.
|
1 2 3 |
<script type="text/javascript"> iFrameResize({log:true}); </script> |
Here’s the completed website code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pardot iFrame Resizing</title> <meta name="description" content="iFrame message passing test"> <meta name="viewport" content="width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style type="text/css"> iframe {border:0;} </style> </head> <body> <iframe src="http://info.jennamolby.com/x/xxxxx/xxxx/xxxxx" width="100%" scrolling="no"></iframe> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script> <script type="text/javascript"> iFrameResize({log:true}); </script> </body> </html> |
That’s it!
Your embedded Pardot form should now adjust based on the content. Have questions? Email me, send me a tweet @jennamolby, or leave a comment
This was super helpful, thanks for taking the time to write it up!
Time and time again, I find myself on this website getting excellent answers to problems I’m trying to solve. Thank you so much for sharing your work!!
Thank you so much 🙂
Is it possible to have multiple Pardot forms on a page and have the iFrame resizing work correctly?
We have a web page with 5-6 separate “click to download gated content” links
We have this set up in an accordion, the goal being that when you click on a link, the accordion would expand to show the form.
Clicking on the first accordion link does expand to show the entire form.
Clicking on any of the other accordion links below only expand to show the first line of the form.
Oddly enough, this functionality DOES work when viewing on a tablet (iPad) but NOT when viewing on a desktop computer.
We’ve tested this on multiple desktop web browsers, all with the same result.
Hello! Yes, you can do this with multiple forms on a single page. You would need to use a new ID for each one of your iFrames and then modify the javascript to include those IDs. Hope that helps! Cheers, Jenna
Will height get update on risize of window?
Hi Gustav, Yes, that’s correct! Cheers, Jenna
This is great! How would I go about doing this if I have more than one Pardot form on a page? I’d like each form to resize individually. Any help would be greatly appreciated!
Hello, you would need to give each of your forms a unique ID and then add this line in twice document.getElementById(‘sizetracker’).style.height = e.data + ‘px’;. Cheers, Jenna