This tutorial will show you how to add an email capture form to your website using Bloom’s widget form tool. This is a great plugin for adding forms to your footers and sidebar.

 Transcript from the WordPress, Bloom, & Divi Tutorial

Hey everybody, this is Jimi Blevins coming at you with another tutorial.

Today I’m going to show you how to put a “Bloom Opt-In” form in the footer area, using a widget. So let’s dive right in!

Coming in here to our WordPress Dashboard, down here in Bloom, on the Opt-In forms, and I’m going to click here on “New Opt-In.”

Screen Shot 4

The type I’m going to select is, “Widget.” Let’s name it “Widget Opt-In.”

Here are our “Email Settings,” and if you want to go back and see how to integrate Mailchimp with your Bloom Plug-In, there’s a tutorial specifically for that. I show you how to add the account and get the API key and all that fun stuff, just dig back at two or three tutorials and you should be there. This just sets up which email list this information is going to get dropped into.

Screen Shot 5

That’s all we need to set up on that page so click “Design Your Opt-In.”

The next thing we’re going to do is our design, and for this, I’m going to want something pretty simple. I think I’m going to go with, the first name and last name.

SCREENSHOT2

I’m going to grab just a simple form. Then we go ahead and scroll down to the bottom, hit “Next”, and we can customize the form.

Here we’ve got our “Title,” “Subscribe To Our Newsletter,” and “Join Our Mailing List.” I’m actually going to get rid of the image, say, “No Image.” We won’t have any image in this, it will just be a simple: first name, last name, and email address. Our background color for our form is fine. Anytime you want to preview what your form looks like, you can just hit this button right here, and then it’ll pop up.

Screen Shot 8

This is just a really simple straightforward, “Subscribe To Our Newsletter.” The only thing I did want to change is, I actually want to put in a “Single Name Field,” and then that’s fine. We got “Email,” we got “Subscribe,” these are the settings of course for our form.

Then we’ve got our edge style, the edge style is just the part that separates kind of your texts from your form itself. Right now I just got a straight line, I think I want to change it. Change it to the swoop and I’ll show you what that’s changing. (It’s this line right here.)

Screen Shot 13

Before it was straight, and now just a little bit of a curve to it. The form footer text is if I wanted anything underneath that “Subscribe” button, I could put that here and that would show up.

Then the “Message Text”, this is when somebody subscribes, this is a little message that pops up, “You’ve Successfully Subscribed.”

“Custom CSS,” this is if we want to go outside any of the options we have on this page and just kind of do a little bit more with our own custom code, but we don’t need to worry about that right now. I’m just going to save and exit, this will pop me back into my list. Here’s my widget opt-in all ready to go.

SCREENSHOT3

The next thing I need to do is come up here to “Appearance,” and then “Widgets,” and this is how we’re actually going to put this form into our footer.

Screen Shot 16

I’ve got my Bloom widget here, and I’m going to drag this over to “Footer Area Number Two.” Then we pick our widget opt-in. Any opt-ins that you’ve made specifically for widgets are going to show up in this menu. It’s so easy to integrate, drag-and-drop, a wonderful way to just put simple forms anywhere on your website.

Screen Shot 17

After you’ve done that you can refresh your page. When that pops up we’re going to see this form right here in our footer, “Subscribe To Our Newsletter,” and with all the options you saw, if I wanted this to match the background I could go that route with it. I just wanted to keep this simple to show you guys how to actually put the “Newsletter” or the “Email Subscribe For More” right there in the footer of your website.

Screen Shot 18

So I hope that helps you guys out.

My name is Jimi Blevins and thank you so much 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!