As a marketer, you have likely seen several pop-up form examples while researching the best ways to convert leads. These impromptu forms might be asking you to download a piece of content, talk to sales, or maybe just ask you if you need help. While they are trying to help you, they can often be seen as intrusive or annoying, and yet, we’re finding they have some of the highest conversion rates of all forms. According to a study conducted by Sumo, some of the very best pop-up forms can achieve up to a 50% conversion rate. So for something that’s seemingly so annoying, it seems to be performing pretty well!
Which may lead you to ask, how can I use pop-up forms with Pardot? This tutorial will focus on how to use a Pardot form on your WordPress site as a pop-up – great for those marketers who want to create the pop-up form experience with no code using a Pardot form. Of course every website is different, and each organization has their own requirements, so first, here’s an overview of the types of pop-up forms you could choose.
Types of Pop-up Forms
With so many different types of pop-up forms, there seems to be an art of creating pop-up forms that convert effectively.
Of course the use of a catchy slogan, or limited time offer, and a great call to action will catch the attention of your page visitor, but the type of pop-up will also play a huge role. There are two primary types of pop-up forms, one we’ll call the partial page pop-up and the other the full-page pop-up.
- Partial page pop-up: the partial page pop-up is the most commonly used. They’re generally small, and appear somewhere in the center of the page, on the bottom right corner, or floating on the side ready for you to sign up for some sort of offer.
- Full-page pop-up: as it sounds, it covers the entire page, and can be a little frustrating to page visitors as it does cover the entire page. A best practice for the full-page pop-up is to show this when the page visitor gets to the bottom of the page, and they’ve finished consuming your amazing content.
My advice? If you’re not sure which to go with, go with the partial page pop-up.
Pardot Forms as a Pop-up
This tutorial will focus on how to use a Pardot form on your WordPress site as a pop-up. The most common way to use a Pardot form on your website is to embed it (if you’d prefer to embed your form, stay tuned to part two of this series).
Step 1: Pardot Layout Template
Your Pardot Layout Template is the HTML/CSS of your form. It controls how the form will look on your website. Traditionally, you might be using this for your landing pages, but now you’ll need to create one that just has the form styling. So you’ll want to work with your developers to create this if you don’t already have it.
If you’re in Pardot Lightning, navigate to the Content tab → Layout Templates → Click ‘Add Layout Template’ → Name your template → Paste in the HTML/CSS.
Step 2: Create Your Pardot Form
Now you’re going to need to create your Pardot Form. This is where you’ll select your fields, the layout template, and don’t forget to add those completion actions!
When you create your form, you’ll navigate to the Content tab → Forms → click the New Form button. Complete the information on the Name’ tab as you normally would, identifying the campaign and folder you’d like to save it in.
Next, select your fields. We’ll cover more in-depth features on the form in a later part of this series, but for now set up the form fields you’ll need on your site. When you go to the Look and Feel tab’ be sure to select the Layout Template you created specifically for this form to be used on your site. Finally, make sure you identify your thank you content. If you’d like to redirect page visitors to another page, you can do so by checking the box to redirect a URL rather than showing a form thank you content. Again, we’ll cover completion actions and advanced features in a later part of this series.
Step 3: Download the WordPress Pop-up Plugin
Time to switch over to your WordPress website. Log into your WordPress account and download this free plugin called Popup Builder. You won’t need to pay for this unless you’re planning on getting more sophisticated, for example, if you’re planning on using it with WooCommerce or another plugin. For now, this works great for basic pop-ups. Once you download the plugin, you’ll want to start building your pop-up.
- Under the Pop-up Builder navigation click ‘All Pop-ups’.
- Click the ‘Add New’ button.
- You’ll want to open a new tab and go to your Pardot form in Pardot and then copy the embed code. Locate the form, on the top right corner, there is a drop-down, click on the ‘View HTML Code’, then copy the HTML.
Step 4: Insert the Pardot HTML to Your Site
Navigate back to your WordPress site and the new pop-up you started to build. No matter what theme you are using, there should be a tab to insert Text, locate that tab and pasted the Pardot HTML.
Step 5: Define your Settings
You have a few options if you’d like this form to display on specific pages in combination with on-click, on-hoover, on-scroll, or even inactivity. There are a lot of different options, so you’ll want to select the options based on your preferences.
There are a ton of other options too, but for a basic pop-up that page visitors view based on button click you can leave them empty. For this example, we’re going to use the pop-up form link on the actual button on the page.
Step 6: Add the Form to the Button
For this example, I am going to use the ID of the form, and place the pop-up form on a button, that already exists on my site. There are a few ways to do this, I will show you two ways.
First, you need to grab the class of the form you just created in the pop-up builder. To do this go back to the pop-up builder menu → click on all pop-ups. You should see a list of your pop-ups, and on the right you’ll see a column for class, copy that class.
Depending on the type of builder you are using you’ll need to apply the class one of two ways. If you are using a builder that has a separate button module, where you can identify the CSS Class of the button alone, paste the class from the pop-up builder there. If not you’ll end up adding this class to the entire region, and more than the button will have the link to the pop-up form. If you’re not sure, the best-case scenario is to create a link, so append the URL of your site with the pop-up class.
Example:
URL: www.mysite.com
Pop-up class: sg-popup-id-170
Button URL: www.mysite.com/#sg-pop-up-id-170
So you’d add the new button URL you just created to the button you want the pop-up to appear on your site.
Of course every website is different, and each organization has different requirements. This method is great for those marketers who want to create the pop-up form experience with no code using a Pardot form on a WordPress website. If you need help with your Pardot forms, feel free to reach out to us here, for a complimentary consult, we’d love to help!
Comments: