The Right Way To Embed a Pardot Form on a Website

The Right Way To Embed a Pardot Form on a Website

min. reading

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:

  1. Allowing for progressive profiling
  2. Built-in email validation
  3. The ability to use the drag and drop editor to modify form fields
  4. 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="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>

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>

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

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

Questions?

Send me a tweet @jennamolby, or contact the Sercante team for help.

Subscribe to The Spot

Hidden
Hidden
Hidden
Hidden
This field is for validation purposes and should be left unchanged.

Upcoming Salesforce Events

Salesforce Training Courses

Categories

Top 5 Recent Posts

  • Jenna is a Marketing Operations leader with over 10 years of experience working with both enterprise organizations and start-ups. She started her career as a consultant, helping B2B and B2C clients get the most out of Marketo, Pardot, Marketing Cloud and Salesforce. She then moved in-house, working with B2B SaaS companies, helping them build their sales and marketing technology stacks and processes from scratch.

Leave Your Comment

Related Articles

Bot Single Post