Elementor (Affiliate Link):
https://wickydesign.com/get-elementor
Watch our latest video on how to add a MailChimp Popup with Elementor:
https://wickydesign.com/how-to-add-a-mailchimp-popup-with-elementor/
Video Transcript
Email marketing is really important for small business owners because it lets you communicate with your customers on a regular basis. If you’re watching this video, my guess is that you’re probably already familiar with the service MailChimp. MailChimp offers a lot of integration and ways that you can get subscribers, including embed forms that you can place on your website. But the problem with those embed forms is that they’re kind of ugly. They’re not the best. They don’t have your branding, they won’t have your colors or your fonts, or anything like that, so when you put them on your website, it kind of looks a little out of place. But today, I’m going to show you how to create an opt-in form with Elementor that will have all your branding, all your colors, and will look sleek and seamlessly integrate with your website.
This is what we are going to be building today- this box that says Subscribe for Updates. In order to do this, we will need an Elementor Pro account and a MailChimp account. What we are going to be doing is connecting our website to our MailChimp account via an API key.
Before we get started, I want to make note that this will work if you don’t use MailChimp for your email marketing service. Elementor has a lot of different integration built into its platform. They have support for Convertkit, Mailerlite, and a few different email marketing services, so if you’re not using MailChimp, you can still do this. Just wanted to make a note of that.
The first step to make this work is generating an API key. You’ll want to login to your MailChimp account and then click up in the top right corner where your name is, then click account > extras > API Keys.
I’ve already generated an API key for this tutorial, but if you haven’t generated an API key, you’ll just want to click this button here and then it will create a new key for you. Then you’ll copy your key and login to your WordPress dashboard.
From there, you’ll want to go to Elementor and then Settings. Then click the Integrations tab. And as you can see, there are a bunch of different integrations already built into Elementor. Like I said, you can use a different service in order to do this, but we’re going to scroll down to where it says MailChimp and paste in our code there.
You can click this “Validate API key” just to make sure that everything is correct and then scroll down to the bottom and hit “Save Changes”.
So what that just did was connect our MailChimp to our website. Now what we have to do is create the opt-in form.
So I’m going to go to pages and I’ve already created a page for this tutorial so I’m just going to open that up in Elementor.
So I have my page here with a 2 column layout – an image on the left and some text on the right and what I want to do is create my opt-in form below.
So I’m going to click the plus sign and then select a 1-column structure.
The first thing that I’m going to do is add a heading. And in that heading, I’m going to say Subscribe for Updates. I’m just going to style this a little bit by centering the text.
And the next thing that I’m going to do is add a form. Now, a lot of people think that forms are just for contact form, but this is actually what we use to generate the opt-in.
So when you put in the form, by default it has the fields name, email, and message. We don’t want anybody to fill in the message field because they are just opting in to our list, so we can actually remove that field, so that is the first thing that I’m going to do to customize this.
The second thing that I’m going to do is make sure that both the name and email field are required. So I’m going to click here and check the required option, go to email and make sure that is required as well.
Now I want to style this a little bit better so it looks more customized, so I’m going to make both of these 50% width columns so that way they go side by side. Then I’m going to scroll down to the button’s options and change the submit to say “Subscribe” because that just makes a little bit more sense than having “Send”.
I’m going to do some additional styling as well. So I’m going to click the style tab. I’m just going to increase the columns and rows gap just to give it a little bit more space. Then I want to change this label so that it’s not bumped up right next to the field. I’m going to go into the field and just give that a border radius of zero so there are no rounded edges. Then in the button, I want to style that as well, so I’m going to select a background color of black and then for the hover, I’m just going to make it a gray color. So that looks pretty good. I’m also going to give this a border radius of zero because I want a square button instead of those rounded corners.
So, I’m liking how this is looking, but you can customize as much or as little as you want. It has all of the same styling options as any other Elementor widget, so feel free to go crazy.
So let’s go back to content and set this up so that it does what we want it to do.
Actions After Submit is where kind of the magic happens so to speak. So right now it has an email field. We don’t want that because we don’t want to get an email when anybody subscribes, we want the name to go into our MailChimp list. We are going to remove that and then we are going to select MailChimp. And you’ll see, there’s this field here for MailChimp below.
When I click on that, you’ll see it has API key and the field is default. We just want to leave that as is because that’s pulling in the API key that we pasted into our Elementor settings.
The audience, we will select whatever list we want to add people to. You can also group and tag your list if you want, which would be useful if you are doing some sort of contest or a freebie, just to track how many people signed up for it. It’s totally optional and you don’t have to do that.
I’m also going to click this double opt-in. What this does is when somebody signs up, MailChimp will automatically send an email to them saying “Hey, just want to confirm that you actually want to subscribe.” You don’t have to do this, but I recommend that you do it.
And then field mapping is another important step. So what we have here are two different fields – a name and an email field. When we field map, we are basically telling MailChimp what fields to import into their system. So email, we need to select email and then we need to go down to first name and then select name.
And scrolling down to the bottom where it says “Additional Options”, we will want to customize this message. Right now, the message will say, “The form was sent successfully.” so we can customize that to say something like, “Thank you for subscribing.”
Now, if we hit preview changes, it will open up in a new tab and we can see everything is looking really nice and how we want it to look, so let’s publish this and give it a test.
I’ll hit the update button and go back to my page. Let’s test this out. And you can see it says, “Thank you for subscribing.” which means that the information went into our MailChimp API list. Everything is working as it should.
And it’s as easy as that to create an opt-in form on your website that is nice and stylized with your branding, with your colors and your fonts. And it just makes it a lot easier and encourages people to really opt-in to your mailing list. You can add these forms wherever you want using Elementor. You can put it on as many pages as you want, you can add it to blog templates, you can add it to popups, whatever you want to do. You can really customize it and encourage people to subscribe to your list.
I hope that you found this tutorial helpful and if you did, please give this video a thumbs up, be sure to subscribe to the channel and ring the bell to receive notifications whenever we post new videos like this. Bye!
