How to Create a Pop-Up Form In Pardot

In:

In this tutorial, I will show you how to create a pop-up form that can be placed on a Pardot landing page. I will go over 2 methods, opening the pop-up form when a link is clicked and opening the pop-up on page load.

Getting Started

Before you get started, make sure you have a form and a landing page created.

Get the pages and files ready

We will be using Magnific Pop-up jQuery Plugin to create the pop-up in Pardot.

Step 1: Download the Files

Download the Javascript File and the CSS file by pressing CTRL + S on your keyboard and saving it to your desktop.

Step 2: Upload files to Pardot

Now you will need to upload the 2 files you just downloaded to Pardot under Marketing > Content > Files.

pardot-popup-form-upload-files

Copy and paste the URLs of the uploaded files into a word or text document. You will need these in step 3.

Step 3: Add the files to your layout template

Add the CSS file

At the top of the page, somewhere within the <head> </head> tags, link the CSS file.

Make sure you change the pop-up CSS URL to the Pardot content URL.

pardot-popup-form-update-template-css

Add the JavaScript Files

Open up your layout template, scroll down to the bottom of the page and add the following script right before the closing </body> tag.

Make sure you change the pop-up plugin URL to the Pardot content URL.

pardot-popup-form-update-template

Open The Pop-up on Click

To open the pop-up form on click add this piece of code where you want the link or button to appear.

Add this javascript code right before the closing </body> tag.

pardot-popup-form-solution

Open The Pop-up on Page Load

To open the pop-up form when the page loads add this HTML anywhere in the body of your page.

add this javascript code right before the closing </body> tag.

You can remove the ability to close the pop-up, so the user has to input their information to continue, by adding modal:true to the JavaScript.

pardot-popup-form-solution-no-exit

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Related Posts

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

  • 24/10/2018
    How to Create a Net Promoter Score Survey in Pardot

    Learn how to build a net promoter score (NPS) survey directly in Pardot. I will show you how to create an NPS survey that asks the recipient to give you a score from 1 – 10 using an in-email rating that directs them to a Pardot landing page to collect more information.

18 comment(s)
  • Alec Beretz

    18/12/2017 at 10:21 am
    Reply

    The Magnific Pop-up jQuery Plugin link you provided 404's but I don't see in the instructions where this is actually used. Could you clarify? Is it needed?

    • Jenna Molby
      to Alec Beretz

      18/12/2017 at 11:04 am
      Reply

      Hi Alec, thanks for letting me know, I've updated the link. Yes, the plugin is used step 3 "Add the files to your layout template". Cheers, Jenna

  • Nick Becker

    28/09/2017 at 7:17 am
    Reply

    HI Jenna, Your blog is incredible and has become invaluable as my company has recently switched to pardot. I am having a little trouble with this tutorial,specifically for the last bit where you add the javascript before the closing body tag. Basically it won't recognize the javascript and tries to recognize it as html script and as text on the actual LP. Am I doing something wrong?

    • Jenna Molby
      to Nick Becker

      28/09/2017 at 8:56 am
      Reply

      Hi Nick, Are you wrapping your javascript in SCRIPT tags? If you're still having trouble feel free to email me at [email protected] with a link to your landing page and I can help you troubleshoot. Cheers, Jenna

    • Nick Becker
      to Jenna Molby

      04/10/2017 at 1:20 pm
      Reply

      That was the problem...*face palm* Thanks so much!!

  • Katy

    12/05/2017 at 3:39 am
    Reply

    Hi Jenna, Were you able to address the issue Geoffrey was having? I am able to do something similar using a Bootstrap modal but if the form is completed with errors, Pardot refreshes the page and the user doesn't have a change to see the message to complete the required fields. Would the workaround be to insert an iframe form in the modal instead?

  • Inna Nazarova

    30/10/2016 at 6:35 pm
    Reply

    Hi Jenna. Great article, thanks. We've set up the form and popup and it's working great but I can see multiple form views for some prospects who have completed the form previously. How can we prevent this popup from showing up? Or would it be cookies related?

    • Jenna Molby
      to Inna Nazarova

      31/10/2016 at 9:22 am
      Reply

      Hi Inna, So glad you found it helpful. Yes, to prevent the form from being loaded again, you would need to set some cookies.

  • Geoffrey

    03/10/2016 at 1:21 pm
    Reply

    Hey Jenna, thanks for the info. I came across an issue that I'm not sure how to fix. How do I keep the pop-up form from closing if the user submits without filling out a required field? I submitted the form without filling out the fields; the modal instantly closes upon submission and I have to click the button to re-open the form pop-up in order to see my form errors. Is there anyway to keep the modal window open if there's a field error upon submitting? Thanks again.

    • Jenna Molby
      to Geoffrey

      04/10/2016 at 11:08 am
      Reply

      Hi Geoffrey, Are you using a Pardot form or a Pardot form Handler? Feel free to email me with the link to your landing page and I can help you troubleshoot [[email protected]].

    • Jerris Heaton
      to Jenna Molby

      10/05/2017 at 9:25 am
      Reply

      Hello Jenna, I'm having a similar issue to the one Geoffrey described. I know it was more than a year ago by do you by chance remember how to fix this? Thanks in advance!

    • David
      to Jenna Molby

      02/11/2017 at 3:15 pm
      Reply

      I'd also be interested in a solution to this. Great resource, by the way.

    • Tom
      to Jenna Molby

      16/05/2018 at 8:19 am
      Reply

      Great article, super easy to follow along! I'm also having the same issue where the form can be closed, and needs to be reopened to see any error messages if required fields are not entered. Is there a solution to this?

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 sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts