Maybe you own a WordPress website and you’re looking for a way to grow your email list.
It’s a wise decision to build an email list because, unlike social media platforms, which can chop and change any time they want—leaving your marketing in the ditch—having your own email list means you have direct access to people who want to hear from you regularly. It offers you far more control.
In a previous post I waxed lyrical about why you must get MailerLite for your email marketing.
In this post I want to expand on how to start incorporating their system into your WordPress website.
The goal
The goal is to add an email newsletter signup box to your (WordPress) website using the MailerLite WordPress plugin.
For the purpose of this post I used a stock standard WordPress install with the latest theme.
Existing MailerLite account
I’m using an existing MailerLite account for the purpose of this tutorial, since I can’t create a test MailerLite account just for the purpose of creating tutorials.
In fact, one of the things I appreciate about MailerLite is that they’re strict about account creation. You must go through an approval process before your account is activated.
It’s not like you have to complete a Navy SEAL training course and get a retina scan at CIA headquarters, but the added level of security makes their service more desirable.
Let’s get started…
The tools
You need the following tools to add a MailerLite newsletter signup box to your website:
- A WordPress installation.
- Self-hosted (wordpress.org), not wordpress.com.
- MailerLite.
- I’m assuming you’ve already created an account and was approved by the time you tackle this tutorial.
- MailerLite WordPress plugin.
Install the plugin
I wrote a detailed post showing you, step-by-step, how to install a WordPress plugin, should you not be familiar with the practice.
Let’s run through installing MailerLite’s WordPress plugin here.
Go to Plugins page
Log into your WordPress website’s admin dashboard.
Open the Add New page under the Plugins menu item.
Search for MailerLite
Add the word, mailerlite, into the search box at the top right.
Click the install button
You’ll see MailerLite’s plugin showing up in the first position.
Click on the Install Now button and wait for WordPress to complete the installation.
Click the Activate button
Once the installation is complete, the Install Now button turns a different color and the text changes to Activate.
Click the Activate button.
Add the API key
In order for WordPress to communicate with MailerLite, you need to paste your MailerLite API key into your MailerLite plugin settings page in the WordPress dashboard.
Here’s how.
Click on MailerLite
In the left hand sidebar of your WordPress dashboard you’ll see a MailerLite menu item.
When you hover over that menu item, a sub-menu pops up.
Click on the Settings sub-menu item.
Once open you’ll notice a box wherein you must paste your API key.
Let’s find your API key.
Open MailerLite
To find your API key you’ll need to open your MailerLite dashboard in a new tab.
Leave your WordPress dashboard open on the MailerLite settings page and in a new browser tab, visit your MailerLite dashboard at app.mailerlite.com/dashboard. (If you’re not logged in you’ll be redirected to a login screen, after which you’ll be redirected to your dashboard.)
Click on your brand name
In the top right hand corner of the MailerLite dashboard you’ll notice your brand name (with your logo, if you’ve uploaded one).
Click on your name to show a dropdown menu.
Click on Integrations
In the dropdown menu, click on Integrations.
Click on WordPress
A new page opens showing all the apps MailerLite can interact with.
Click on the WordPress option.
Click on Copy
On the next page, scroll all the way to the bottom of the page.
You’ll see your API key (a long string of letters and numbers) inside a box with a button attached to it that reads Copy.
Click the Copy button.
Paste the API key
Go back to the tab where you’ve got your WordPress admin dashboard open.
Under the MailerLite settings menu, paste the API key into the box and click the button that reads Save this key.
The page refreshes and shows two new options:
- MailerLite Popups.
- Double opt-in.
MailerLite Popups are enabled by default, but the double opt-in option is disabled. This is perfect. Do not enable double opt-in.
Many people might sign up through your website but not click the confirmation link sent through the confirmation email MailerLite sends when you use double opt-in. It’s best to skirt this issue from the outset by leaving double opt-in disabled.
Create a signup form
It’s time to create your first signup form.
Click on Signup forms
In the left hand sidebar, click on the Signup forms button underneath the MailerLite menu item.
Create a signup form
Click on the Add New or Add signup form button.
You can keep your signup form super simple by only adding a standard, one field signup box, or create a more complex, interest-based signup form.
If you click on a signup button on my website (blom.media) you’ll see an example of an interest-based signup form. That’s because I don’t want to send my religious, political and short story posts to people who’re only interested in online marketing tips and tech.
In another article I’ll show you how to add an existing MailerLite form to your website. Sign up for my newsletter to receive that tutorial.
Custom signup form
Let’s create a custom MailerLite signup form.
Click Create form
By default the Custom signup form is selected when you first create a MailerLite form inside WordPress.
Just click the Create form button.
Give your form a name
You can give your signup form any name. It really doesn’t matter.
Choose your interest groups
Here you choose the interest groups people are added to when they sign up for your newsletter.
Interest groups offer powerful functionality. You can tie them in with your website categories to let subscribers choose what they receive from you. I’ll tackle this in a later post, so sign up for my newsletter to receive updates.
For the purpose of this post I’ll check the marketing and tech interest groups.
Click Create form
Click the button at the bottom of the page with the text, Create form.
Edit your custom form
On this page you can add a form title, custom form description, custom success message and a custom button title.
I’ll leave the form title as is.
For the form description I’ll add the following: “Get seriously cool marketing advice, absolutely free!”
For the success message I’m using: “Thanks for signing up!”
The subscribe button text I’m making, “Yes, keep me informed!”
Click Save form
At the bottom of this page, after you’ve made the changes according to your preferences, click the Save form button.
Copy the shortcode
On that same edit page, near the top, you’ll see a shortcode. You’ll need this shortcode to display a form inside a page or post.
Highlight and copy the shortcode, and paste it into a text document or sticky note for later use.
Add the form to your website
You’ve created a signup form. Now it’s time to add it to your website so people can sign up and you can build your list.
You’ll need the shortcode for this part of the tutorial. If you didn’t copy and paste it to a text document or sticky note as described earlier, you’ll find it by opening the form you created.
When you’ve got the shortcode you can move on to the next part of this tutorial.
Please note: I prefer using the classic editor for WordPress, not the newfangled (and horrifying) Gutenberg editor (AKA block editor). But alas, since some out there do use Gutenberg, I include it in this tutorial.
Using Gutenberg Editor (AKA block editor)
Follow along to add your MailerLite signup box to your pages or posts using the new Gutenberg editor.
To a page
I won’t be creating a new page for the purpose of this tutorial. I’ll be adding a MailerLite signup box to an existing page.
Click on Pages
Click on Pages in the left hand sidebar.
Click on Edit
Once the Pages page opens, hover over Sample Page and you’ll see a menu popping up underneath it with some options, one of which is Edit. Click it.
Dismiss the notice
If you open Gutenberg for the first time you’re greeted with a popup notice to teach you how to use the editor. Close this notice or go through the steps.
Add a block
You need to add a new block into which you can paste the shortcode for the signup box.
You can create a block anywhere, but for the purpose of this tutorial I’ll just add a block at the top of the page, below the title.
Click the three-dot menu
Gutenberg isn’t intuitive. When you open a page with it for the first time you might find it confusing. You might struggle to figure out how to edit the page. That’s OK. Just follow along and you’ll do well.
Click on the text inside the top box, just below the title. This brings up a popup menu with a three-dot dropdown menu.
Click the three-dot menu to reveal a dropdown menu.
Click on Insert Before
A few items down there you’ll see two menu option to insert a new block, either above or below the current block. Click on Insert Before.
Paste the shortcode
Paste the form shortcode inside the new block you’ve just added.
Update the page
Click the Update button at the top right hand side of the screen to ensure the changes take effect.
View the page
It’s time to see if the form shows on the page.
Click on the Preview button in the top right hand corner.
This opens the page in another tab. Navigating to the newly opened tab should show the form displayed on the page.
To a post
Adding a MailerLite signup form to a post will be similar, if not identical, to adding a signup form to a page.
Let’s quickly do it.
Click on Posts
Click on Posts in the left hand sidebar.
Click on Edit
Once the Posts page opens, hover over Hello world! and you’ll see a menu popping up underneath it with some options, one of which is Edit. Click it.
Add a block
In order for the signup box to show up, you need to paste the shortcode for the signup box into a new block.
You can add a new block anywhere, but for the purpose of this tutorial I’m adding a block to the top of the page, below the title.
Click the three-dot menu
You might struggle to figure out how to edit a WordPress post with the block editor. That’s because the block editor is not intuitive. But don’t stress. Just keep reading.
Click on the text that begins with, “Welcome to WordPress.”
Click the three-dot menu to reveal a dropdown menu.
Click on Insert Before
A few items down there are two menu option to insert a new block, either above or below the current block. Click on Insert Before.
Paste the shortcode
Paste the shortcode for the MailerLite signup form inside the new block you’ve just added.
Update the post
At the top right hand side of the post, click the Update button to make sure the changes take effect.
View the post
The form should now be visible inside the post.
Click the Preview button at the top right hand corner to open the page in a new tab.
This opens the post in another tab. Navigating to the newly opened tab should show the form displayed on the page.
Using the classic editor
Follow along to add your MailerLite signup box to your pages or posts using the classic editor.
To a page
I’ll be adding a MailerLite signup box to an existing page, not creating a new page for the purpose of this tutorial.
Click on Pages
Click on Pages in the left hand sidebar.
Click on Edit
Once the Pages page opens, hover over Sample Page and you’ll see a menu popping up underneath it with some options, one of which is Edit. Click it.
Make space for the form
To add the shortcode to the top of the page, hover your mouse over the text inside the edit window, then click at the beginning of the text, on the T.
Paste the shortcode
Paste the shortcode where you’ve created the space for the signup form.
Update the page
On the right hand side of the page, click the Update button for the changes to take effect.
View the page
You can view the page by clicking the link at the top of the page, or the preview button on the right hand side of the page.
To a post
Follow these steps to add your MailerLite signup form to a post using the classic editor.
Click on Posts
In the left hand sidebar, click on Posts.
Click on Edit
Hover over the title of the post. This brings up a menu. Click on Edit.
Make space for the form
To add the shortcode to the top of the post, hover your mouse over the text inside the edit window, then click at the beginning of the text, on the W.
Paste the shortcode
Paste the shortcode into the newly created space.
Update the post
To the right you’ll see an update button. Click it to ensure the change takes effect.
View the post
It’s time to see if the form is showing correctly. Click the View post link or Preview Changes button to view the post.
To a widget
It’s better to add your signup form to a widget area than to pages or posts individually.
That way, you can set up a signup form once in a widget, and it’s displayed on most, or all, of your web pages.
Follow these steps to add your MailerLite signup form to your WordPress website’s widget area.
Click on Appearance
In the left hand sidebar, click on the Appearance menu item.
Click on Widgets
A dropdown menu opens when you click Appearance. Now click on Widgets.
On the left hand side of the Widgets page you’ll notice a bunch of rectangular boxes. These are called widgets.
On the right hand side you’ll see two large boxes. One is marked Footer #1, the other, Footer #2. These are called widget areas. They’re containers you can stick widgets into.
Remove needless widgets
This is optional, but in order to make sure the form stands out on the website, I’m removing all widgets from the Footer #2 widget area, after which I’ll add the MailerLite widget.
Click the dropdown
To remove a widget from a widget area, click on the down arrow button inside the widget located within the widget area.
Click Delete
Now click the widget’s Delete button.
Repeat these steps for any widget you no longer want showing on your website.
Click on the MailerLite widget
Listed among the widgets on the left hand side of the page you’ll see a widget called MailerLite sign up form.
Click on it. This reveals a dropdown with a check mark next to the Footer #1 widget area.
Check the correct widget area
Click on the Footer #2 widget area to ensure the widget is added to Footer #2.
Add the widget
Now click on Add Widget. This should add the widget to Footer #2.
Choose your desired signup form
Since there’s only one signup form you don’t have to worry about making a choice.
But if you’ve created two or more forms, the widget will give you the option to choose which one you’d like to use by way of a dropdown.
View the form
The form is now visible on the website, wherever the Footer #2 widget is active.
In conclusion
Building your own email marketing list is a great way to not fall victim to the whims of social media platforms and paid marketing platforms.
It takes time, money and effort, but a good email list is worth gold if created correctly. That’s because it belongs to you and you can market to that list whatever you want, whenever.
But what should you use for your email marketing?
Well, MailerLite is a fantastic email marketing platform. And using their WordPress plugin will enable you to stick a signup form into any location on your WordPress website.
Get MailerLite, get their WordPress plugin and start building your email list today.