What is Gated Content?
Gated content is content on your website that is behind a form and anyone visiting your website must fill up the form successfully before they can access it. The content could be a link to a page, a downloadable file or any high valuable content.
How does Gated Content Help Businesses?
From a marketing point of view, gated content is used for Lead Generation. This is when you want to gain information from your visitors like their name or email address so you can use the information for email campaigns.
The big question is whether or not gating content will work for your business. Some users may find gated content annoying and decide against inputting their details into your form. The key to using gated content is earning your leads. The content you create leading up to your content will help users decided whether or not they’ll be interested to learn more from your business. If you create high quality content, users are more likely to want to engage with you further.
The Tools
Gravity Forms
The most common contact form plugin and truly one of the best for WordPress powered websites is Gravity Form. They have a wide API library where you can find any hook and filter you want to use for customizing functions that are activated before or after a form is loaded. Having theses for gated content form improves user experience. We want the user to be automatically redirected to the click content after he/she has clicked it.
Easy FancyBox
WP EASY FANCYBOX PLUGIN is a plugin for wordpress that gives us a flexible lightbox. We use its online content feature which works by creating a link for hidden content that shows up when the link is clicked. We will use this as the container of the form.
Next we have to write jQuery functions to mask all links for the gated content. This would require some knowledge on how cookies work as they will serve as our “storage” for what the visitor has clicked. Cookies also serve as “memory” for the browsers to remember that this visitor has already filled up the form and there will be no need to show it again because you certainly don’t want to keep the content gated for someone who has successfully filled up the form already. This also improves user experience.
Here’s How to Create Gated Content
Step 1:
We start by a assigning a specific ‘class’ to a div or any section or container where we know all links will be gated.
<div class=”gated”>
</div>
Step 2: Install and Create your Gravity Form plugin
Gravity Forms has great documentation on how a to install it on your WordPress application, you can check it out here. If you want to gain email subscribers you can create one email field input just like what I’ve made for purecircle.com R&D Blog. If you want visitors to register on your website before accessing any content, you will need to create a form that includes name, username and password. I used this porcess for commoncore.com
The advantage of using Gravity Forms is that it has many extensions plugins like the MailChimp integration wherein if someone has successfully filled up your form, the email they inputted is automatically added to the MailChimp email list you have selected on the plugin setting. That way, there is no need to manually export your list from WordPress and import it to MailChimp.
Step 3: Incorporate the Easy FancyBox
Installing this is as easy as any other wordpress plugin. After you’ve installed the plugin, go to
Settings > Media
And make sure to enable inline-content for fancybox settings. Screenshot available.
To integrate both plugins, include the Gravity Form shortcode inside the ‘fancybox-hidden’ div. Below is a sample of how the code should look like. The best place to insert this code is into the footer widget, then you have hidden it like you did for FancyBox because we won’t be clicking on it directly but will do it programatically using jQuery each time a visitor clicks on a link that is gated.
<a href="#subscribe-form" title="" class="fancybox-inline" id="pops-link">TRIGGER GATE</a>
<div style="display:none" class="fancybox-hidden">
<div id="subscribe-form">
[gravityform id="5" title="false" description="false" ajax="true"]
</div>
</div>
Here is a screenshot from PureCircle where I’ve created a subscription form.
Step 4: Mask All links using jQuery
$(document).ready( function() {
var user_subscribed_cookie=readCookie("user_subscribed");
if (user_subscribed_cookie!=null) {
}else{
$('.gated-blog a').on( 'click' , function() {
var href = $(this).attr( 'href' );
$(this).attr("data-href", href);
$(this).attr("href","#");
$.cookie("url-link", href);
});
}
$('.gated-blog a').mouseup(function() {
var user_subscribed_cookie=readCookie("user_subscribed");
if (user_subscribed_cookie!=null) {
}else{
document.getElementById('pops-link-2').click();
$(".fancybox").fancybox({
afterShow: function () {
$(this.content).attr("tabindex",1).focus()
}
});
}
});
});
The Code above will read if a cookie ‘user_subscribed’ is present in the browser. We will get into how to save the cookie on the browser later. Since the user has not subscribed yet, there will be no cookies on the browser, thus the condition on the code will trigger to replace all links under the ‘gated-blog’ class with the hashtag value #. However, we need to store the original link clicked by the user using jQuery cookie function. At the same time on the mouseup click event of the user, we check again if the user is subscribed. If they aren’t, we trigger a click on the FancyBox link, via jQuery, that triggers the popup box to show up, then add the function for the FancyBox to set the cursor focus on the popup box form.
Step 5: Insert Cookie when a visitor successfully submitted the form
Next we’ll be adding Cookies using php, and the code should go to the functions.php file. To set this up we will have to create a hook for the gravity form. The hook we’ll use will be the ‘gform_after_submission’ which, obvious by its hook name, will trigger after the gravity form has been submitted. Using the php function setcookie, we will set the cookie to last upto 5 years into the future, unless the user clears the browser cookies.
add_action( 'gform_after_submission_1', 'after_subscribe_submission', 10, 2 );
function after_subscribe_submission( $entry, $form ){
setcookie("user_subscribed","YES",time() + (5*365*24*60*60)); //FIVE YEARS INTO THE FUTURE
}
Step 6: Redirect your user using jQuery
After the user completes the form we have to redirect them to the page they desired to open in the first place. Since we have the original url cookie on the browser, we can access it and then change the window location using jQuery. On this function we make use of the gravity form function ‘gform_confirmation_loaded’ which triggers when the gravity form has loaded its response message. Note that this will trigger on successful submission not on form error message.
$(document).on('gform_confirmation_loaded', function(e, form_id){
//var countdown_time = 5
if(form_id == 1) {
var url_link = jQuery.cookie("url-link");
if(url_link!=null){
setTimeout(function(){
window.location.href = url_link;
}, 3000);
}
else location.reload();
}
});
There you have it, a simple combination of WordPress plugins to create another custom function on the website that will help you gain subscribers.