There are many reasons why you should embed your website with Pardot Forms. If you use the Pardot form, not only will you have more access, but you will also be able to use some of Pardot’s improved functionality, such as progressive profiling, dependent fields, and when they come back to the form, users will be remembered.

Pardot provides 2 methods on your website for embedding forms; embedding using an iframe, and form handlers. Although the embedded iFrame forms enable marketers to monitor the update and configuration of the forms, it is not always optimal to use an iFrame for website usability. I’ll explain to you how to take advantage of the Pardot iFrame forms in this article and make it look good embedded on your website.

How to Create a Pardot Form:-

Step 1: Pardot Layout Template

Your Pardot layout template is the HTML/CSS of your form, it controls how the form will look on your website. Traditionally, you might be using this for your landing pages, but now you’ll need one that just has the form styling.

So you’ll want to work with your developers to create this if you don’t already have it. If you’re in Pardot Lightning, navigate to: Content tab → Layout Templates → Click Add Layout Template → Name your Template → Paste in the HTML/CSS.

Step 2: Create the Pardot Form

You’ll need to build your Pardot form now. This is where you’re going to pick your fields, design layout, and don’t forget to add those completion actions!

You can navigate to: Content tab → Forms → click the ‘New Form’ button.

Complete the Name tab information as you usually would, specifying the campaign and folder in which you want to save it. Select your fields next. On the shape, and when to use them in a later part of this series, we’ll cover more in-depth features.

Be sure to pick the Layout Template you developed specifically for this form to be used on your site when you go to the ‘Look and Feel’ tab.

Lastly, make sure that your thank you material is found. You can do it by checking the box to redirect a URL instead of displaying a form thanks to the content if you choose to redirect users to another tab.

Step 3: Paste the Embed Code to your Site

Navigate to your Pardot Form and copy the embed code. Locate the form, on the top right corner, there is a drop-down, click on the ‘View HTML Code’. Copy the HTML.

Here’s what you should do about integrating Pardot Forms using an iframe.

The height of the form is what you’ll want to take care of here. This means that it could only show 500px of the form, no matter how long the form is, so if the form is longer than 500px, you will see a scroll bar on the form. It will be better to work with them to add some Javascript to the form to change the form size automatically if you have a developer on the team.

Of course, when you embed the shape, you can change the size yourself, but you will need to keep in mind that the following form features will cause the height of the form to differ:

  • Pardot forms will know who you are so each user will not always show the same number of fields.
  • Depending on any validation messages, the height of the form may change, such as errors when a form is submitted and the appropriate field is not completed.
  • If you are using dependent form fields, as the user begins to complete the form, the form will naturally expand.

If you want to learn more about or help in implementing the pardot form you can reach us for help. We would be happy to help you.

Share This