Protect Your Blog Content With Email Subscribe Form

Recently I had a customer looking to gather emails for their newsletter before people read the articles on their site.  As with anything else, there are multiple ways to go about this.  Below is documentation on how I chose to set it up.

Please note that this protection is not 100% (like most things) and there is a way to get around it.  If you need a 100% method, there is a paid option that will work. *

What is needed

You’re going to need a couple plugins:

1. Popup Maker – Popup Forms, Optins & More By WP Popup Maker
2. Gravity Forms & MailChimp Add-on  (note that GF is a paid plugin and you will need to have the add-ons available to you.  If you just want to collect emails and don’t need them synced with your Mailchimp account, then you won’t need this.)
3. MailChimp Account Of course, you can use another email marketing company, but just make sure it’s one that integrates with Gravity Forms – and there are a lot!

Get Started

1. The first thing to do is to install Gravity Forms and set up the information that you want to collect before people can read your article.  Usually that will be name and email address, although you can configure more fields if you so desire.
2. Next, install the Mailchimp add-on and make sure it’s integrated with your Mailchimp account.  If you’re not sure how to do that, check out this video.
3. Finally, it’s time to install the Popup Maker plugin and get it set up.

Setting Up Popup Maker

1. Once you’ve installed and activated the plugin, you’ll see a new “Popup Maker” option in your left hand menu.

There are multiple options in the Settings & Tools submenu items, but I left all these alone and went straight to Add Popup.

2. You’ll see two titles.  One is for the back end and is required, and the other is what users will see.  Feel free to leave this one blank if you don’t need a title to show on your popup.

3. Next you’ll see the editor, and this is where to insert your Gravity Form and any text that you want to show with your popup.

4. Now scroll down to your Popup Settings.  We have a few things to configure here:

• Triggers Here you’ll need to set up a trigger that that the popup automatically opens on the page.  You can use a time delay, but I chose to set this option to 0 so it opens as soon as the page is loaded.  Next you’ll need to set the cookies so once someone submits the form, they can actually see the content and don’t have to keep submitting the form again for each page.  This isn’t intuitive, but you’ll need to choose BOTH Gravity Form Success AND On Popup Close.

• Targeting This is where you’ll decide where your popup shows.  For me, I wanted it to show only on specific pages where I wanted the content protected, so I chose that page. You can add as many pages or posts or media as you like.  You’ll see in the screencapture below tha the page I am protecting is titled “Test Video”.  
• Display If you want to customize how your popup looks, use this option.  I left everything as the default here.
• Close The next option allows you to customize the text for the close button, and choose the length of time before the close button shows up.  In most of the options, you’ll see at the bottom an option to upgrade to paid extensions to increase the capabilities of this free plugin.  
  *This is where the not 100% perfect comes in.Technically there is a close button for this popup.  I have chosen a delay that is likely to outlast how long most people would wait, so in most cases it will work, but if someone happens to wait around, the close button will open for them.  If you want to disable that button all together, you’ll notice that there is a paid add-on called “Forced Interaction” that can solve this problem. 
• Advanced Finally, on the Advanced settings, I chose to disable automatic re-triggering of a popup after non-ajax submission since my gravity form was not using ajax.

Finish Up

Once I did all that, I was ready to publish the popup and test.  Make sure it looks and is working like you want.  Then confirm that emails are being sent to your mailchimp account. If you run into problems, they have a pretty large set of documentation here.

Problems

After setting this up successfully on my own test site, when I tried setting it up for a client, it turned out he was using ROK plugins whose javascript  conflicted with the popup.  I was unable to open the Popup Settings to format it.  Because the Rok plugin was used throughout the site, I had to abandon the popup.  I came up with a different way to get a similar affect, which I will detail in another blog post. I was still able to use the Gravity Form, so I didn’t have to start from scratch, and the plugin conflict was apparent right away, so there wasn’t a lot of time wasted.  If anyone has this same problem of the popup settings not showing up, please let me know if you were able to overcome it.  Good luck!