2 Free Pardot Landing Page Templates You Can Use for Your Next Event


Create beautiful, responsive landing pages in Pardot by using one of these 2 free Pardot layout templates. These landing page templates are designed specifically for events such as webinars or trade shows, but they will work well with any landing page that contains a form.


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.

Preview the Templates

Template 1

Template 2

How to Use the Templates

1. 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.


2. Copy the link to the template by clicking on one of the ‘copy link’ buttons below. This will copy the URL to your clipboard.

Template #1 View Demo
Template #2 View Demo

3. Navigate to the import layout drop down and select from URL. Paste the URL to the template into the text field and click import now.

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.


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

Related Posts

  • 15/10/2020
    How to Use Flex Fields in Pardot

    Flex fields are custom fields that can be used over and over again to limit the number of one-time-only fields within Pardot and Salesforce. They contain data that is required temporarily to execute a specific event or campaign. Once the data is no longer needed, the fields can be reset to blank using an Engagement Program or Automation Rule

  • 04/10/2020
    How To Embed a Pardot Form on Your Website The Right Way

    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.

  • 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.

25 comment(s)
  • Annette Ibarra

    25/09/2018 at 8:41 am

    Hi Jenna, I am using your template #1 while also using it as inspiration to begin building my own! I have one question regarding the javascript code at the very bottom at the very bottom of the code. The first function is for placing the form either before or after the highlight which I understand. And below that, the function is being called on a document. What document is this referring to? You are also adding an EventListener to the window as a whole, is this what tracks the size of the browser window? I see there is a Download link right above (labeled "open-form desktop-hide"). Does this mean this download link is only visible on mobile devices? Thanks! Great Template!!

  • Jenn

    16/08/2018 at 8:41 am

    Hi Jenna, Love these templates, Thank you! If I use your workaround for the image banner, will this affect the landing page only or will it change it at the template level as well. Thanks!

    • Jenna Molby
      to Jenn

      16/08/2018 at 10:10 am

      Hi Jenn, So happy you like them! It will affect the landing page. If you use that method you can choose a different banner image for each landing page. Cheers, Jenna

  • Emily Z

    30/07/2018 at 6:31 am

    These templates are wonderful, Jenna. Thank you so much for providing them!

  • Lou

    26/07/2018 at 12:33 pm

    These templates are fantastic - but I'm having some challenges with getting my form to show up instead of the placeholder.

    • Jenna Molby
      to Lou

      26/07/2018 at 12:40 pm

      Hi Lou, Thank you! You might be importing the preview links instead of the template links. Make sure you use one of these two links: template 1 (https://jennamolby.com/Pardot-Templates/Event-Template-1/pardot-template.html) template 2 (https://jennamolby.com/Pardot-Templates/Event-Template-2/pardot-template.html). Cheers, Jenna

  • Lou Hong

    26/07/2018 at 11:24 am

    Hi, this is fantastic! Is it possible to make the banner image itself an editable region so I can swap the image without having to modify the template? Thank you!

    • Jenna Molby
      to Lou Hong

      26/07/2018 at 12:51 pm

      Hi Lou, thank you! The background image has to be edited using CSS, but there's a workaround to have a different background image per landing page. Add this HTML right after the opening BODY tag <div pardot-region="background-image-css"></div> This will create an editable section available within the top left corner of the landing page editor. You can then use that section within the editor to modify the landing page's CSS. Here's the CSS for the background image section: <style type="text/css"> </style>

    • Pardot adds CDATA around any CSS outside of the BODY tags. You need to edit this region and escape the CDATA tags - /**/

    • Jennifer Motze
      to Jenna Molby

      17/01/2019 at 9:07 am

      Hi Jenna, Thanks for these great templates. I am quite a bit out of my scope, but your blog has been a tremendous resource. I've duplicated the 1st landing page into my system, and I'm trying to implement the work around for editing the background image. Unfortunately, I've got ZERO background with coding and I have no idea what you mean by "right after the BODY tag" or "edit the landing page's CSS" (from one of the comments). Do you have any introductory coding resources that you could recommend to a beginner like me?

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.

Most Commented
Popular Posts