This tutorial will show you how to add an inline form that appears in your content. Use this tool to capture email addresses from your website visitors.

Transcript from the Bloom and Divi Tutorial

Hey, everybody, this is Jimi Blevins.

Today we’re going to go through a tutorial to show you how to do another form with the “Bloom Opt-in” plugin from Elegant Themes.

So, to get started I’ll just click here on “New Opt-in.”  Today we’re going to show you how to create a “Below Post Form.”

ScreenshotHotToCaptureEmailsWithABelowPostForm2

“Below Post Forms” are great for if you want to just have something automatically put to the bottom of your posts without having to go in and add it every time. This is how you do that.

We’ll call this “Below Posts Form,” and then we’ll pop in our “Mailchimp integration.” (Once again if you look back through the tutorials I’ve got one where I walk you through getting into your MailChimp account and getting this API key to get this setup.)

ScreenshotHowToCaptureEmailsWithABelowPostForm3

Next, let’s go ahead and design our opt-in form. Again we’ve got a ton of great options to choose from, I’m gonna go with something simple.

ScreenshotHotToCaptureEmailsWithABelowPostForm12

On the next page we go into our “Customization Options,” and from here you can pretty much make this look like any form on the last page. All those options are built in here. I think they just kind of have these predefined layouts in here to make our lives easier, which has helped developers, designers, or if you build your own website to get things done easily.

You’ve got your “Opt-in Title,” and this is just going to be the main heading. You’ve got your “Opt-in Message,” this is just your little blurb to get people’s interest and get them to sign up. Now here you’ve got your image, and you can set your image orientation. You can have it be above the text, below it, to the right, or to the left. You can also upload a custom image and then even an animation. If you want to do an animation on your image, it’s right there. We can even hide it on mobile devices if you want to save space.

Screen Shot 2017-03-08 at 1

Now we get into the styling. You can pick a different background color and you’ve also got a ton of fonts to choose from. I’m just going to leave it on “Open Sans.” You can change the header, the body font, change your text color, (this just kind of if it’s a dark background, you can set it to light text, if it’s a light background you can set it to dark text.) “Corner Style,” this is just if you want to round the corners on your form to make it look, you know, kind of pretty. Whatever you want to do. You’ve got your border orientation, your color, and then you even got different styles to choose from; like this stamp kind of mail thing, a single, a double, a dotted. There is so much you can do to really customize these forms. I really like the way they set up this plugin. So then we’ve got our form setup.

ScreenshotHotToCaptureEmailsWithABelowPostForm4

We’ve got our image, we’ve got our texts, and then underneath that, we’ve got our form. We can switch that so it’s to the right of our image and text, or to the left of our image and text. You can do a “Name Field.” You can do single name, or you can do two separate fields: one for the first name, and one for the last name. Our “Email Text,” this is just what shows up in the field so that people can see, “Oh, this is where I put my email address.” Then we’ve got our text for a button to subscribe.

ScreenshotHotToCaptureEmailsWithABelowPostForm5

The next thing we go into is our “Form Styling.” We can stack our form fields, we can have them be inline, side-by-side. We’re only using one so that doesn’t really matter here. You can even round the corners or square the corners. We can pick our texts: if we want it dark if, we want it light. We can even do a background color, button color, you can customize anything that you want with this one.

At any point in this customization, if you want to see how the form is going to look, we just pop right here over on the blue eyeball and then the forms going to pop up and show you. Here’s what we’re going to look like on the page. Now it shows the pop-up form no matter what, so even though we’re building an inline form for our content, what we’ve got here now is what its gonna look like as a pop-up. Don’t worry about that because once it’s all done, it’s going to be in line with our content just the way that we like it.

ScreenshotHotToCaptureEmailsWithABelowPostForm7

Here’s our field to add a little bit of text to the footer if you want to, we can also modify our success message: this is what people will see after they’ve subscribed. If you want to do any custom CSS, even go further in styling this form, you can add that code right there.

Next, we’re going to move on to our “Display Settings.” This is what triggers how the form gets displayed, for this, we’re going to display it on our “Posts.” These are all the categories: you can pick which categories you want it to show up in. This is a great feature, “Automatically Check Categories Made In The Future.” So if we were doing pages, we can have specific pages we wanted it displayed on. If we did not want it to be on certain posts we can also put those in here. So you can put a list, say there’s like three pages you have a different opt-in form for, well you can put those pages in here and it won’t show up on those.

ScreenshotHotToCaptureEmailsWithABelowPostForm6

Then we’ve got “Display On These Posts,” and this is if I want to go in and specifically say “I want this form to show up on these specific posts.” We’re just going to leave it so it shows everything, that’s going to make our life a lot easier. That’s done, that’s everything, it’s all set up.

Let’s jump back over to our homepage really quick and just pull up a blog page so I can show you what I’m talking about. If we scroll down here on our blog page, boom, there we go. There’s our form that we put together inline just the way we wanted, automatically stuck on there.

ScreenshotHowToCaptureEmailsWithABelowPostForm11

That’s great because that really frees up your time. It’s a great way to quickly and easily add that lead capture to the bottom of your blog post if you wanted to say you know, “Sign Up For More Blog Posts Here,” this is where you would do it.

That pretty much covers everything with this opt-in form.

Once again my name is Jimi Blevins and thank you so much.

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!