I am happy to write that I was able to embed the Box.com Upload Widget within the Pardot Form itself! This allows you to only place one embed code in the final landing page, and allows for a cleaner layout.
What you need:
Create your form as needed in Pardot. In our case, we were having customers place orders for branded marketing materials. This particular form needs to gather standard shipping-type information (name, address, etc.)
Go to your Box.com account. If you haven’t created a folder for the uploads, do so now. Click on the […] icon to the right of your folder, and click “Upload Widget.”
Fill out what you want the upload widget to say. You can place instructions here if you want, rather than on the resulting landing page.
Copy the embed code from Box.com.
Now, instead of placing the embed code for the Box.com Upload Widget on your landing page, you get to place it directly in the Pardot Form! Edit your Pardot Form, and go to the “Completion Actions” tab. Click the Source Code button, and then paste your embed code for the Box.com Upload Widget.
You can also include your Thank You message before the code, along with any upload instructions you want your audience to see.
Now you’re all done! Here’s how the final form and upload widget work together.
Make sure to test out the form and upload widget before releasing to the masses.
With some research (I’ll link some resources at the bottom of the post) and some testing, I was able to create this landing page template:
Here are the steps I took to create our landing page.
Step 1. Find your prototype page.
Find a page on your website that you would like the landing page to look like. I like to think of this as when you’re buying a house – look for a page that has good bones, one that has the header and/or footer you want, one that has the body that you want, etc. I chose our website’s “Terms and Conditions” page because it had the cleanest body to build from.
Action: Copy the URL of your prototype page.
Step 2. Create your layout.
Since we didn’t have an existing landing page template that I liked. I started with the page that had “good bones” and opened that code within Adobe Dreamweaver. In Dreamweaver, I got rid of the Navigation Bar present throughout our main website. I also cleaned up the body of the page so I could place more than text. Next I created two basic columns, one column for the featured or hero image, and the other column for the title, description, and form.
Now, you may be wondering to yourself, “Why didn’t he use the built-in Pardot form instead of an iframe?” There’s a good answer! And, it took me a bit of trial and error to figure it out.
As you may or may not know, Pardot uses “Layout Templates” for both Forms and Landing Pages. So, if you’re in your “Layout Templates,” you’ll notice templates for your forms and landing pages alike.
The problem in the case of our landing page is that we’re trying to incorporate two different Layout Templates within the same page; the template for the form, and the template for the landing page. Pardot only recognizes the template for the “outer-most” asset, in this case the Landing Page.
The solution to this problem, i.e. using a different Layout Template for each the Landing Page and the Form. To create a template so that anyone can change the form, you need to create an editable section where you can paste the iFrame code. For that, you’ll need code similar to this:
Pretty simple step here. Copy all of the HTML code from Dreamweaver, and paste into the HTML section of the Landing Page Layout Template.
Action: Paste HTML code into Pardot template.
You’ve now created your template! Now, you probably want to create a new landing page from your template.
Step 6. Create a new Landing Page.
Navigate to: Marketing > Landing Pages > New Landing Page. Name your Landing Page, choose a folder, and then choose the relevant Campaign.
On the next step, you can click “No form.”
Step 7. Choose your template.
On the “Content Layout” step, choose the template you just made.
Step 8. Edit your content.
Now you can change and insert the content you want on your final page! Change the image, title, and description to what you want.
We’ll do the form in the next step.
Step 9. Get the iFrame code for your Form.
In a separate tab or window, navigate to: Marketing > Forms > Forms. Click on the form you want.
Now, copy the iFrame code:
Step 10. Paste in your iFrame Form code.
Go back to your tab/window with your landing page. Click on the editable section for your form. At first, you won’t see anything. Click on the “Source” button in the top-right to reveal the HTML code for that particular section.
Paste in your iFrame code here. And now you’ll have a complete landing page!
As I promised at the beginning, this post wouldn’t have been possible without the help and assistance of many people.
The first and most helpful resource overall was “How to Turn any Landing Page into a Pardot Layout Template” from Jenna Molby. Jenna’s post walks you through step-by-step in changing an existing landing page into one that works in Pardot. So, a very similar concept to my situation, but we didn’t have any existing templates.
“Using Content Regions” from the Pardot Knowledge Base. This was helpful to figure out how to make the sections I wanted in my template to be editable. Without this, you’re just left with a page you can’t edit!
Pardot B2B Marketing Automation – Salesforce Success Community. A great, great resource for anyone looking to up their Pardot game. I did a search for some of the issues I was having, like the “form vs. landing page template” problem, and found the solution on here. If you’re not a member of this community, you need to join today!