This tutorial will show you how to add a form to your website that visitors must fill out before having access to content on your website.  Use this locked content lead capture called Bloom, a great plugin from Elegant Themes to work with the Divi Theme.

Transcript from the Bloom plugin, Divi Tutorial for WordPress

 

 

Hey everybody, this is Jimi Blevins.

Today I’m going to show you how to create a “Locked Content” opt-in form using the Bloom Optin Plug-In made by Elegant Themes.

What you want to use this particular opt-in for is, let’s say that you had a blog post or something for download: like downloaded video, download an image or PDF and you wanted to ask people for an email address before you gave him access to that download link. This plugin is a great way to do that.

 

 

Let’s go ahead and start here: I’m in the “Bloom Options” in our WordPress Dashboard. We just start off by clicking on “New Optin.” I’m going to click on “Locked Content,” and then once that comes up, we just want to put a name in, and this is for your reference. I’m going to call this, “Locked Content Form” and then you go ahead and set up your “Email Provider Settings.”

Screenshots for Adding A Locked Content Form

If you look back a couple tutorials, I walk you through how to connect this with Mailchimp and get the account all set up and pulling your lists. Right now we’re just picking our email provider, the account, and the list we want to put people on. That’s all we need to do on that page.

 

 

The next is going to be the design. We want something that’s going to catch the eye, but we want something that’s pretty simple, and all we’re asking for is an email address. You can use these as either finished products or just starting points. (I won’t go too much into details on how to customize everything, I take care of that in another one of these tutorials for the Optin Plugin, so check them all out.) You kind of get the full picture of what this is, but I’ll just go through this really quick.

ScreenshotLockedContentForm

 

We want to make this one a little more tailored so, “Subscribe To Our Page To Download This Video.” I’m going to add this to a page I’ve got a video on already. “Join Our Mailing List To Receive The Latest News And Updates on Our Team,” so this up here is like the main header image or the main title, and this is kind of our message a little bit more information. At any time if you want to look at how this is going to appear on the page, you can click here on this preview button. That will pop up your email subscribe to form.

 

ScreenshotForLockedContentForm

 

Here we’ve got our “Image Settings. “You can upload your own image and you can also change the orientation: if you want to the left, or the right of the text, if you want it on top, and then we can even have an animation for when the image pops in and of course we can hide it on mobile devices if we want to create some space.

 

ScreenshotForLockedContentForm2

 

Now we’ve got our styling for kind of the top of the form: we’ve got a background color, font, pick a text color, choose whether or not you want to round your corners. Then the form setup, we’ve got, “Form On Bottom,” because the email field and the button are there on the bottom of the form, we can move that to the right or to the left if we want to. We can also add a field for the name, or two fields one for the first name and one for the last name. and then, of course, we’ve got our email text. This field here is for the email form, so we can put in “Email Address” if we want to be a little more descriptive.

ScreenshotForLockedContentForm3

 

Then this is the text that goes on the button, “Subscribe” is what we’ve got now. I’ll pull up the preview really quick to show you kind of the options we went through. So here was the background color, the first one we came into, then you can choose the color of the text, you can choose the images here, or here, or maybe on the top, and then here’s where we put email and then the text on the button. I want to change that “Download Video,” little more of a call-to-action.

ScreenshotForLockedContentForm5

The form styling, you can do your inline form fields, we can stack them on top of each other, you know if they were to the right or to the left you want to stack. We can even round the corners, change the text color, and then, of course, we’ve also got the background color for the form and then the color for the button, then our button text color as well. These edge styles: you can do straight, or a little bit of a dip, I’ll pick that one just to show you really quick. This is that line between the kind of description of the form, and the form itself. So we’ve got like this little triangle in there, or you can do you like a big thing or kind of swoop, this one looks like a picket fence. Those are just some little added things you can throw into the form.

 

 

Here we have the footer text. This is if you want to put something underneath that email field, maybe a little additional information (we don’t need to do that now) and a success text message. This is actually the text will pop up once the form is shown. So let’s put, “You’ve Successfully Subscribed, Now Download Your Video.”

ScreenshotForLockedContentForm6

 

 

If you want to do some custom CSS, we put it right here. That’s if you want to even go further outside of the options that are given here in the form. So right now what we need to do is, that’s the final step in actually designing the form, so if we click here on, “Generate Shortcode” this is going to give us the shortcode for that opt-in.

ScreenshotForLockedContentForm7

We just copy that to our clipboard really quick and hit OK, then let’s save this. This will pop us out into the list of the different opt-in forms that we’ve got.

 

 

Now that the page is up, you can see this is the locked content form we just made, and this button right here, if we click on it, it will pop up that little shortcode option again. You don’t have to go back into the form, you can grab it right there.

ScreenshotForLockedContentForm9

 

 

I’m actually going to put a link, say somebody wants to download the video, I’m going to put a button down here so they can download it. I’ll walk you through that really quick.

ScreenshotForLockedContentModule10

 

 

I come in here to my “Edit Page,” and then I want to insert a text module put our shortcode in. Now you can do this one of two ways: first I’ll show you the code way to do it, and then I’ll show you the other way. So we can come in here, we’re in our “Text Editor.” We’ve got it set to the text, kind of the code option of the text editor built into Divi. So we paste that in and then you can see it’s got two sections.

Screenshot12

 

You’ve got your first bracket here, which shows which opt-in form it’s going to grab, and then kind of the closing bracket. This content that’s in the middle here, this is what you’re actually locking people out of, so once they fill out the form they’re going to have access to whatever I put in between those two brackets. So what I’m going to do is, I’m going to put a “Download” link.

Screenshot13

 

I’m actually not going to have the link go to anything, we don’t need it to right now. Just a really simple link. So we’ve got our form, we’ve got our content, and I’m going to say “Update Page.” Then we’ll pop over to the page we’ve got, that we made the change to and I’ll show you guys. Now here we are, “Subscribe To Our Newsletter, Download This Video,” that’s all in there. This can be a button, you can get more extravagant with this if you’d like, I just wanted to show you a really simple example.

Screenshot14

The other way that you can do this, which is a little bit of an easier route instead of going with the code. I’m just going to grab this text actually, delete everything that’s in there.

 

I click over here on “Visual,” and now in the Visual Settings, I can come here to “Insert Form,” “Locked Content,” “Locked Content Form,” and see it looks familiar. It drops my shortcode right in there for me. Then in here, I can paste my text, the “Download Video” text, you turn that into a link. Right now I’m just using the hashtag just to make all of our life simple. Now that we’ve got that done we can just hit “Save” and “Exit.” Then update the page.

Screenshot16

That’s how you do it. That’s how you add a simple form in there to grab somebody’s email address before you allow them to access and content on your website. I hope you found that helpful.

 

Once again my name is Jimi Blevins and thank you for watching.

Let's Get Started!

Enter your email address below to begin setting up your account.

You've completed the first step!

Connect With Us For More Epic Tutorials And Blog Posts

Connect With Us For More Epic Tutorials And Blog Posts

Accompany us on our journey of creation, design, and inspiration worldwide. 

Connection Successful... Welcome To The Wonderful World Of Mozaic Technology!