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 Content > 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.
|
1 2 3 |
<style type="text/css"> .white-popup-block{background:#FFF;padding:20px 30px;text-align:left;max-width:350px;margin:40px auto;position:relative} </style> |
Make sure you change the pop-up CSS URL to the Pardot content URL.
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.
|
1 2 3 4 |
<!-- Load jQuery --> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <!-- Load the Pop-up Plugin--> <script src="http://info.jennamolby.com/l/xxxx/xxxxxx/xxxx/xxx/xx/jquery.magnific_popup.min.js"></script> |
Make sure you change the pop-up plugin URL to the Pardot content URL.
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.
|
1 |
<a class="popup-with-form" href="#my-form">Open form</a> |
|
1 |
Add this javascript code right before the closing </body> tag.
|
1 2 3 4 5 |
$(document).ready(function() { $('.popup-with-form').magnificPopup({ type: 'inline', }); }); |
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.
|
1 |
add this javascript code right before the closing </body> tag.
|
1 2 3 |
$(document).ready(function() { $.magnificPopup.open({items: {src: '#my-form'},type: 'inline'}, 0); }); |
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.
|
1 2 3 |
$(document).ready(function() { $.magnificPopup.open({items: {src: '#my-form'},type: 'inline', modal:true}, 0); }); |
Hi Jenna,
Popup form is working fine but when we hit submit button it gets disappeared. I want to show the user that they have successfully filled out the information and will contact them via email.
Can you please help here.
Best regards,
Vikash
Hi Vikash, Unfortunately, I have not found a way to keep the popup open upon submission. The best option is to redirect to a thank you page.
Hi,
I would love to suppress a pop-up for people who are on some Pardot segmentation list (e.g. because they are already on the list the pop-up is for). Is there any way to achieve that?
(Mailchimp has that option because it is Mailchimp itself that creates the pop up, so the pop up “knows” who is on the list already).
Best regrds,
Mark
Hi Mark, Unfortunately, I have not found a way do to this.
Hi Jenna — Superb article. Pop-up forms working OK.
A question: I would like to make the button text editable, but when I add a ‘pardot-region’ I get told “Oh no! There’s a problem with region button5: %%content%% cannot be placed within a region” — do you know of a solution to this?
Hi Thomas, Thank you! The button text can be modified within the form settings. Cheers, Jenna
Hi Jenna —
Is this pop-up solution still working, as I can’t seem to get it to work for me …
Hi Tom, Yes, it’s still working. Cheers, Jenna
Hi Jenna!
I was able to fix my previous issue – it required a bit of javascript wizardry.:
Show Popup
/* For display purposes only */
body{ padding: 0; margin: 0;}
#menu{ background: #aaa; padding: 15px 20px; }
.popup-with-form{ display: block; padding: 15px 20px; }
$(document).ready(function() {
var sectNav = $(‘#menu’);
var sectForm = $(“#my-form”);
// Init Form Popup
$(‘.popup-with-form’).magnificPopup({
type: ‘inline’,
callbacks: {
open: function() {
// Hide the main nav
sectNav.hide();
},
close: function() {
// Show the main nav
sectNav.show();
},
},
});
// Open the form if errors
if (sectForm.find(‘.errors’).length > 0){
$(‘.popup-with-form’).magnificPopup(‘open’);
}
});
More important question though – has anyone noticed that form submissions are being lost with the popup modal form? We are running campaigns using this form and they are showing submissions that are not being pulled into Pardot. This is super concerning as obviously we are wasting media dollars. Any help would be appreciated!!!