How To Embed a Pardot Form on Your Website The Right Way

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

<iframe src="https://info.jennamolby.com/x/xxxxx/xxxxx/xxxx" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>

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.

<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>

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.

<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>

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.

<iframe src="https://info.jennamolby.com/x/xxxxx/xxxx/xxxxx" width="100%" scrolling="no"></iframe>

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.

<script type="text/javascript">
      iFrameResize({log:true});
</script>

iFrameResize({log:true});

</script>

Here’s the completed website code:

<!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="https://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>

<!DOCTYPE html>

<html>

<head>

<title>Pardot iFrame Resizing</title>

iframe {border:0;}

</style>

</head>

<body>

iFrameResize({log:true});

</script>

</body>

</html>

That’s it!

Your embedded Pardot form should now adjust based on the content. Have questions? Send me a tweet @jennamolby, leave a comment below, or book a Peer Chat.