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
Thank you for updating this. It helped us!
You’re welcome!
Hi Jenna – Have there been any changes to cause this script to stop working recently? It suddenly stopped resizing the iframes on our website this week, but we didn’t make any changes to the implementation! I’ve had to go back to adding a height manually on our priority forms so lead gen campaigns aren’t affected!
Hi Michele, Thanks for letting me know. I’ve updated the post with new instructions/code. Let me know if you are still experiencing issues once you have implemented the latest code.
I have been using this method for awhile now and was very happy with the results. However, ti all of a sudden stopped working mid-day yesterday (9/29/20) despite the fact that nothing had updated on our site or server. Has anyone else brought this to your attention? I do not see the script failing per the browser console, so I’m not sure how to fix it? Rzight now I had to resort to setting a static height for my forms (which creates a weird white space in order to be sized correctly on both desktop and mobile.)
Hi Kyle, that’s strange. Send me the link to your page and I can take a look.
Hey Jenna, does this code still work? I had it working on our site for most of the year, but since last week it has completely stopped working. Even trying locally without anything else an iFrame won’t resize itself correctly.
Hi John, I haven’t tried it recently, but it still should work. Send me the link to your page and I can take a look.
Hi Jenna, the codes no longer work.
A lot of error is popping up in the console.
Uncaught TypeError: Cannot read property ‘offsetHeight’ of null
Uncaught TypeError: Cannot set property ‘value’ of null
Any change you will be updating this code?
Hi Bonnie, This code should still work. I recommend making sure you are loading the iFrame resizer plugin correctly on the page. Thanks, Jenna