Introduction
In this post you’ll learn how to create a slick Ask Method style optin form that appears in a lightbox popup when a visitor clicks a button on your page. This optin segments subscribers according to which item they select in a dropdown and tags them accordingly in your email marketing app.
Here’s what it looks like on our example site:
The finished popup looks like ONE element but it actually consists of two components:
1 – The form which collects the subscriber’s info, sends that info to your email marketing app, and redirects the visitor. To create this component we use GravityForms.
GravityForms is pretty much the best forms plugin on the market. You’d be stunned by the huge array of things you can do with it. While you might use a dedicated lead generation plugin like ThriveLeads for simpler use cases, in this case we need custom functionality that isn’t available (or is very limited) in those types of plugins. So GravityForms was the obvious choice for the optin form component.
2 – A lightbox container (the popup) which is where the form and some additional text are placed and arranged to give the impression of a single, coherent element
There are many WordPress plugins you can use to create a popup, but our go-to choice is WP Popup Maker. For this example we’re using the free version of Popup Maker and it’s more than powerful enough to do everything we want. (They’ve also got a premium version which gives you access to a bunch of add-ons that extend its functionality but you won’t need it to replicate this example on your own site).
So in short you’ll need the following plugins:
- GravityForms – this is the plugin we’re using to create the form component of the optin.
- WP Popup Maker – this is the plugin that creates the lightbox popup portion of the option.
- Divi Theme – We’re using the Divi builder to edit and style the lightbox popup to our liking.
- DiviBooster – this is a paid extension that allows you to edit custom post types using the Divi Builder (in this case, WP Popup Maker popups are a custom post type, so in order to edit them using Divi we need to activate the option in DiviBooster).
Now let’s set up the form.
Create the form with Gravity Forms
After you have installed Gravity Forms, just go to Forms > New Form and create the form.
In our example the first field is a dropdown field. But you can just as easily use a radio buttons field or a checkboxes field. The important thing is that you set up your backend form settings correctly to work with your email app and redirect to your chosen destination.
Start by setting up your confirmation in Form > Settings > Confirmations:
You can see that in our example we’re choosing to redirect to a particular page and we’re passing some values from the form to that page in the URL query string. The page we’re sending these newly opted in visitors to is a Thank You page.
Rather than create a separate thank you page for each and every “bucket” (i.e. each unique choice you can pick in the dropdown of our optin) we’ll simply create ONE thank you page and dynamically replace various values (using merge tags) based on what the subscriber put into the form.
This is a bit beyond the scope of this tutorial but suffice it to say that this method saves time and allows you to personalize the thank you page a bit. Plus, once you get into delivering a mini-course, or some kind of other on-site content you can continue using this personalization and gathering more useful info from your subscribers to better understand them, communicate with them, and solve their problems.
Next we’ll configure our email marketing app. We use Drip.
First we install the free Drip add-on for GravityForms (this isn’t an official GravityForms extension but it works well). Once you’ve done that you’ll see the Drip option in your GravityForms settings where you can link to your Drip account. You’ll then also see the Drip option in the form’s settings in the left-hand navigation.
Start by creating a new feed:
You can see by the feed settings above that I’m using a combination of custom fields and tagging, and also a lead scoring component. You don’t have to do anything too advanced, you can just create a separate tag for each bucket in your optin (although I find custom fields easier to work with than tags in this situation).
You’ll also notice that GravityForms has a Popup Maker setting but you don’t need to use it for this tutorial.
Install Popup Maker plugin
Next, install and activate the Popup Maker plugin by searching for it in the Plugins > Add New screen and typing “popup maker”.
Create a modal popup using Popup Maker plugin
Go to Popup Maker > Add Popup and create the new popup.
Here are the Popup settings we used:
At this point we can add the GravityForm and our copy directly into the default WordPress text editor. But the problem is that we do not have much control over the layout and style of the popup and its contents with the default WordPress editor. Wouldn’t it be amazing if we could just use the Divi Builder instead….?
Well we can! Here comes the power of the Divi Booster plugin…
Install and add the proper settings to Divi Booster plugin
After you have installed Divi Booster go to Divi > Divi Booster and under Divi Builder > Standard Builder just check “Enable Divi Builder on Custom Post Types”. Since the Popup Maker plugin uses a custom post type for its popups, the above setting will allow us to use Divi builder to edit any WP Popup Maker popup.
And now, when we edit the popup we can see the Divi Builder option:
The final look of the modal popup
Here’s how it looks now when we edit it:
You can see in our example above that I created a new section and a 1/2 column which splits the column down the middle into two halves. I then added some text modules with a bit of basic styling, and a code module which contains the GravityForms short code to embed the form we created.
The end result:
Triggering your popup on a page
The last step is to place your popup on the pages and posts where you want it to appear.
In our example we want the popup to appear when somebody clicks on an image on our page. So first we need to grab the CSS class and apply it to a link element. We do this by going to Popup Maker > All Popups and finding the CSS Classes column for the popup we created.
Notice there are two classes in this field, separated by a pipe character (|). Copy the second class, which is the text AFTER the pipe. In the screenshot above, for example, it’s popmake-homepage-modal
Next go to your page where you want to embed the popup and open the TEXT editor. Select your image or text and wrap the following code snippet around it:
<a class="popmake-homepage-modal">YOUR IMAGE OR TEXT GOES HERE</a>
Which looks like this in our editor:
Now publish your page and test that everything’s working! If not, just let me know in the comments below and we’ll help out. 🙂
