Multi-step popup optin using Divi and GravityForms

Today you’re going to learn how to create a nice multi step pop-up with GravityForms and Divi. To re-create this popup you’ll need to have the Divi WordPress theme and a Drip account (you can open one for free here). *Note that you can also modify this tutorial to work with other email marketing apps like ActiveCampaign, InfusionSoft, MailChimp, etc.

You’ll also need to install the following plugins:

• GravityForms
• Popup Maker
• Divi Booster
• Drip Email Marketing Plugin

*Note that if you work with us and we do this installation for you, we’ll be able to install these premium plugins for you at no additional cost as we own developer’s licenses, which entitles us to use them on customers’ sites. 🙂

You can watch the video version of this tutorial below, and the text & images version below that:

Once you’ve installed these plugins you’ll need to go to WordPress > Divi > Divi Booster > Divi Builder > Standard Builder and activate the option: “Enable Divi Builder on Custom Post Types” (as shown in the screenshot below).

The reason we enable this option is because the Popup Maker plugin uses custom post types, which will allow you to use the powerful Divi builder to create your pop up.

The next step is to create a new GravityForm form.

Note: You can create any kind of form you want. Simply adapt this tutorial to your needs.

In this example, I’m creating a 3-step form in which I ask for the visitor’s email address & full name (step 1), a paragraph of text (step 2), and a mailing address (step 3).

Go to Forms > New Form.

In the screenshot above you can see I’ve added a name field and an address field.

You then insert a page break in between each section (i.e. step) with the following options configured:

Save the form.

Next, go to Popup Maker > Add Popup to add a new popup form:

When it’s done click on the big purple “Use Divi Builder” button so we can use it to build our pop-up. Once clicked you will get this:

Now click on “Insert Column(s)” and choose 1:

Then, “Insert Module(s)” and choose “Text”:

Then inside your new text module click on the GravityForm button to add the form you already created:

It should look like this:

Now you’ll need to edit the size and parameters for the popup. I recommend these settings as a starting point; tweak as needed:

Size: Medium – 60%

Min Width – 585px

Max Width – 585px

Save your work.

The final step in this process will be to overwrite some of the default GravityForms styling to make the popup content look sexy.

Go to Divi > Divi Option > scroll down to > Custom CSS and add the following:

Save it.

Well done, you are now ready to show your popup anywhere on your website. To do so just go to any page on which you want to display your popup. Then in the content editor toolbar you’ll see a new icon:

Click on it and choose “Popup trigger”, write a text link and choose your popup to link:

The result should be a link text like this:

You can use the result short code anywhere on your site. Notice that the shortcode has three parts: an opening tag, a closing tag, and something in between. You can use any standard HTML element as your trigger by placing it in between the opening and closing tags of your shortcode. In this case I’ve used text but you can just as easily use an image, like so:

or

The result after clicking the link should look like similar to this:

Et voila! Now you’ve got your nice multi-step popup optin ready to use. You can use this tutorial for a variety of use cases such as:

• Survey funnels a la the Ask Method by Ryan Levesque
• Free + Shipping offers
• Multi-step checkouts with Paypal, Stripe, Braintree, etc.
• Support ticket requests
• Contact forms
• Project quotes
• Feedback collection
• Optins with segmentation and personalization similar to Bucket.io

…etc.

If you’d rather not set this up all by yourself, you can use the FormCraft WordPress plugin, which has a multi form pop up option already included. It’s not as powerful as GravityForms but it works for simple situations.

Now lets link the form to your email marketing platform. In this example we’re using Drip but you can connect with almost any email marketing platform using one of the native GravityForms add-ons, or a Zapier integration.

Once the plugin is activated go to Forms > Your form > Settings > Drip. You’ll see the following:

Click on “Drip Settings”:

Click on the link to your “Drip account here” (It will take you to your user page):

Copy your API key and paste it back to the Drip plugin then click “Authenticate”:

Now go back to your form > Settings > Drip and click to “Add a new Drip Feed”. Use the following options:

Name your feed whatever you want (it’s not terribly important what name you use unless you plan to use a lot of feeds in parallel). Select your Drip account from the drop-down list, then select the action you want to perform. In our case, we want to add a new user in our Drip account.

Then on the Drip field add email to subscriber email and new email address and that’s it.

If you are advanced in using Drip you can add a custom field or even tags to play with automations. For now let’s keep it simple and click “Update Settings”.

Now you have a multi step popup that is linked to your Drip / ActiveCampaign / InfusionSoft / etc. account!

Want me to set this up for you? No problem, click HERE to send me a quick email.