3 Free Pardot Landing Page Templates for Asset Downloads

In:

Create beautiful, responsive landing pages in Pardot by using one of these 3 free Pardot layout templates. These landing page templates are designed specifically for gated assets such as white papers and eBooks, but they will work well with any landing page that contains a form.

Terms

These templates are free for both commercial and personal projects. No attribution is required, however, if you use them I would love to see how you customize them. Share your templates with me through Twitter, email, or in the comments below.

Download and Preview the Templates

Template 1

Template 2

Template 3

How to Use the Templates

1. Download the HTML for one of the templates.

2. Create a new layout template in Pardot (Marketing > Landing Pages > Layout Template > Add Layout Template). Give your layout template a descriptive name and add your desired tags.

create-pardot-landing-page-template

3. Copy & paste the downloaded HTML into Pardot and save

Customizing Basics

All templates use the Bootstrap Framework and use Font Awesome for the social media icons. The CSS is directly in the template (no external CSS files are referenced other than the Bootstrap and FontAwesome library). You can easily modify the template to meet your branding requirements by modifying the hex codes directly in the template which are commented clearly within the template file.

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 23/09/2020
    7 Ways Pardot Users Can Use Chrome Developer Tools For Troubleshooting & Testing

    Chrome Developer Tools is widely used by developers to help edit pages on-the-fly and diagnose issues. Pardot users can use DevTools to troubleshoot and test landing pages and forms. In this post, I’ll show you 7 ways you can use DevTools, including how to identify errors on a landing page, how to customize the CSS of a form and how to view hidden form field values.

  • 17/06/2019
    How to Integrate Gravity Forms With Pardot

    Gravity Forms is one of the easiest tools to create advanced forms for your Wordpress website and with some customization they can be integrated with Pardot. In this post, I will show you how to integrate Gravity Forms using Pardot Form Handlers.

  • 28/02/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 1

    Looking for some creative ways to spice up your Pardot forms? In this post, I will show you how to implement the popular floating label technique in three easy steps. I will also show you how to turn your long drop down menus into user-friendly, searchable dropdowns.

35 comment(s)
  • Jessica

    15/03/2018 at 8:16 am
    Reply

    Hi Jenna, What a lifesaver these responsive landing page templates have been- especially since Pardot does not offer native, responsive templates out of the box. I was wondering if/how I could implement a hero image, as opposed to color, within one of these templates? I am using a slightly tweaked version of Template 3. Any guidance you can provide would be most helpful. Thanks! Jessica

    • Jenna Molby
      to Jessica

      15/03/2018 at 9:12 am
      Reply

      Hi Jessica, So happy you like the templates! Add this piece of CSS to the template to make the hero section a background image: .highlight { background: url(https://images.pexels.com/photos/615060/pexels-photo-615060.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb …) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

    • Victor
      to Jessica

      15/11/2018 at 7:30 am
      Reply

      Hi Jenna, Would really appreciate your help on this! How could I adjust the color / font size of the error message on the form? https://go.tpknotweed.com/RequestBrochure Because the form is too big, once the error messages come up, the form container starts covering the footer. Thanks a million for your help!

    • Jenna Molby
      to Victor

      17/11/2018 at 11:41 am
      Reply

      Hi Victor, That's one long form! You could try a two-column form approach. Here's a link on how to do that https://jennamolby.com/the-best-way-to-create-a-2-column-pardot-form/. Cheers, Jenna

  • Stuart

    21/02/2018 at 11:45 am
    Reply

    This is awesome! Thanks for sharing. Is there a way to transform the .highlight section into an editable image pardot-region? I'd love for members on my team to harness imagery within that space.

    • Jenna Molby
      to Stuart

      21/02/2018 at 3:19 pm
      Reply

      Hi Stuart, So happy you like them! Yes, it's possible to use a background image just add this to the CSS between the HEAD tags .highlight { background: url(https://images.pexels.com/photos/615060/pexels-photo-615060.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

    • Stuart
      to Jenna Molby

      23/02/2018 at 9:15 am
      Reply

      Thanks for the quick response that snippet worked like a charm. Do you happen to know of a way to make that background image an editable pardot landing page region? I keep running into an error about regions being nested when I try to add a region to the .highlight section. Thanks for your help with this.

  • owen

    01/11/2017 at 12:24 pm
    Reply

    Thanks a lot for these LP's, they are a lot of help. I was wondering if you knew how to take off the gold stars on the form fields when the field is required? I looked this up on a few different places but cant seem to find the right one for this landing page. Thanks for the help.

    • Jenna Molby
      to owen

      01/11/2017 at 2:02 pm
      Reply

      Hi Owen, Adding this CSS to your form should remove the gold star form.form p.required label, form.form span.required label { background-image:none !important; }

  • Jen

    20/10/2017 at 8:59 am
    Reply

    Hi Jenna, Thank you so much for these, they're awesome! I have a question though. If I used one template for multiple, different landing pages, how would I specify the og:image in each individual landing page? If I would go to post these in Facebook, no image would display. Would you know of a workaround for this? Making individual templates for each landing page is not an option. Thank you kindly! Jen

    • Jenna Molby
      to Jen

      24/10/2017 at 3:18 pm
      Reply

      Hi Jen, Unfortunately, there's no easy way to do this in Pardot without going into the code each time.

  • Kristin Swinnerton

    26/09/2017 at 11:56 pm
    Reply

    Hey Jenna, Thanks so much for sharing these landing page templates - they are awesome and have been super helpful! :D Here is an example of how we have re-purposed it for our company - http://go.pageuppeople.com/l/376182/2017-09-27/9c7j There are only two things: 1. I had to update the font family for the drop down menu's to also be "Open Sans" so that the dropdown font matched the rest of the form. 2. The copyright section doesn't seem to be working for me. I have updated it in the layout template but it still shows your template text. Can you please let me know if you have a fix for this? Thanks so much! Kristin.

    • Jenna Molby
      to Kristin Swinnerton

      27/09/2017 at 8:55 am
      Reply

      Hi Kristin, You're welcome! Your landing page is looking great! Are you able to edit the text within the footer and when you click save it doesn't save? Or is it not editable on your side at all? Thanks, Jenna

    • Hey Jenna, Thanks for the reply! I have been able to edit the text for the footer in the layout template and it has definitely saved but it just doesn't seem to be changing for me. The html where I changed it is here: © Copyright PageUp 2017 Thanks, Kristin.

    • Very odd, but I just tested out one of your other layouts and the copyright in the footer updated perfectly (http://go.pageuppeople.com/l/376182/2017-09-27/9fwx). Still not able to work out why the original one (http://go.pageuppeople.com/l/376182/2017-09-27/9c7j) isn't changing the text over. It is definitely saving the replacement text, "Copyright PageUp 2017", just fine in the layout template. It just doesn't seem to be pushing through to the landing page that uses the template. Dang.

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me


Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Categories
Most Commented
Popular Posts