There are several reasons why you should embed Pardot Forms on your website. Not only will you have more control when you use the Pardot form, but you will also be able to use some of Pardot’s enhanced features, such as progressive profiling, dependent fields, and users will be recognized when they come back to the form.
However, one of the biggest complaints I’ll hear from clients is that they have forms on their website and they just want to use a Pardot Form Handler to pass the submission data to Pardot, but they then lose out on Pardot’s advanced form functionality – so they’re forced to choose between function and design.
As Pardot forms are designed and managed entirely from Pardot, they are essentially placed on your website using iframe, which comes with its own set of considerations! I will take you through the steps to complete this setup, then talk about the things you should know before embedding Pardot Forms on your website using iframe.
Pardot Form + iframe
As mentioned above the Pardot Form is entirely designed and managed inside of Pardot. You’ll even control the look and feel of the form by creating a layout template, that holds the HTML/CSS of the form, inside of Pardot. Then you’ll create the form, with all the form fields, apply the template for design, and copy the HTML, then finally, embed it onto your website.
Sounds pretty straightforward, right?
One thing, to be aware of is the iframe. Using an iframe to embed a Pardot Form will constrict the length of your form, so if you have a developer you’ll want to work with them to dynamically size the form on your site. Worst case scenario you can adjust the length of the form when you embed it, but in some cases, it may not perform the best visually. We’ll dive into the limitations of using an iframe to embed Pardot Forms later on.
How to Create a Pardot Form
If you don’t know how to create a Pardot form, you can follow the steps below.
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
Now you’re going to need to create your Pardot form. This is where you’ll select your fields, the layout template, and don’t forget to add those completion actions!
When you create your form, you’ll navigate to:
Content tab → Forms → click the ‘New Form’ button.
Complete the information on the Name tab as you normally would, identifying the campaign and folder you’d like to save it in.
Next, select your fields. We’ll cover more in-depth features on the form, and when to use them in a later part of this series.
When you go to the ‘Look and Feel’ tab be sure to select the Layout Template you created specifically for this form to be used on your site.
Finally, make sure you identify your thank you content. If you’d like to redirect users to another page, you can do so by checking the box to redirect a URL rather than showing a form thank you content (again, we’ll cover completion actions and advanced features in a later part of this series).
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.
Pardot Form iframe Restrictions
Here’s what you should know about using an iframe to embed Pardot Forms.
What you’ll want to take note of here is the height of the form. This means that no matter how long the form is, it will only display 500px of the form, so you’ll see a scroll bar on the form if your form is longer than 500px. If you have a developer on the team, it would be best to work with them to add some Javascript to the form to automatically adjust the form size.
You could, of course, adjust the size yourself when you embed the form, but you’ll need to keep in mind the following will form features will cause the form height to vary:
- Pardot forms will remember who you are, so it won’t always display the same amount of fields for each user.
- The height of the form can change depending on any validation messaging such as errors when a form is submitted and a required field has not been completed.
- If you’re using dependent form fields, the form will naturally grow as the user starts to complete the form.
Summary: A Hybrid Approach?
Ultimately you’ll have more control when you use the Pardot form, as well as the ability to use some of Pardot’s enhanced features, such as progressive profiling, dependent fields, and users will be recognized when they come back to the form, so their data will be pre-populated.
One of the biggest complaints I’ll hear from clients is that they have forms on their website and they just want to use the handler to pass the submission data to Pardot, but they really want to be able to use some of Pardot’s advanced form functionality, such as progressive profiling, so they’re forced to choose between function and design.
Depending on your existing website and what you have in place it might be valuable for you to leverage the Pardot Form Handlers on your website for simple forms, that users might not revisit, such as a contact us form, or subscribe to a blog.
Then, leverage the Pardot forms on your landing pages for full Pardot form functionality. As I am sure you can imagine, the Pardot landing pages may have recurring visitors if you’re running campaigns such as monthly webinars, or event registrations. For this use case, you can leverage the features like progressive profiling and dependent fields to gather more information about your leads/contacts who are engaging with your recurring campaigns.
If you need help with your Pardot forms, feel free to reach out to us here, for a complimentary consult, we’d love to help!