mailerlite wpbf-post" data-elementor-settings="[]">

How To Use MailerLite’s WordPress Plugin To Add A Newsletter Signup Box To Your Website

Want to use your website to grow your email list? You need a subscription box. Here's how to do it with MailerLite.
Share on email
Share on whatsapp
Share on linkedin
Share on reddit
Share on facebook
Share on twitter

Get WordPress tutorials and online marketing tips delivered to your digital door

My articles are FREE to read. But when you buy through my referral links I earn commission. You don't pay more but I get rewarded for my hard work. It's like a salesman in a shop showing you the goods. Thanks for your support. I really appreciate it.
Table of Contents

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:

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.

Open The Add New Page
Open The Add New Page.

Search for MailerLite

Add the word, mailerlite, into the search box at the top right.

Add The Search Phrase, Mailerlite, Into The Plugins Search Box
Add The Search Phrase, MailerLite, Into The Plugins Search Box.

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 Install Now Button
Click The Install Now Button.

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.

Click The Activate Button
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.

Click On Mailerlite's Settings Sub Menu Item In The Left Hand Sidebar
Click On MailerLite’s Settings Sub Menu Item In The Left Hand Sidebar.

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.)

The Mailerlite Dashboard
The MailerLite 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 Your Brand Name And Logo In The Top Right Hand Corner
Click On Your Brand Name And Logo In The Top Right Hand Corner.

Click on Integrations

In the dropdown menu, click on Integrations.

Click On Integrations In The Dropdown Menu
Click On Integrations In The Dropdown Menu.

Click on WordPress

A new page opens showing all the apps MailerLite can interact with.

Click on the WordPress option.

Click On WordPress
Click On WordPress.

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.

Click The Copy Button
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.

Paste The Api Key Into The Box And Click The Save This Key Buttob
Paste The API Key Into The Box And Click The Save This Key Button.

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.

Click On Signup Forms Underneath The Mailerlite Menu Item
Click On Signup Forms Underneath The Mailerlite Menu Item.

Create a signup form

Click on the Add New or Add signup form button.

Click One Of The Buttons To Create A New Signup Form
Click One Of The Buttons To Create A New Signup Form.

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.

Click On Create Form
Click On Create Form.
Give your form a name

You can give your signup form any name. It really doesn’t matter.

Give Your Signup Form A Name
Give Your Signup Form A Name.
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.

Choose The Interest Groups For Your Email Newsletter
Choose The Interest Groups For Your Email Newsletter.
Click Create form

Click the button at the bottom of the page with the text, Create form.

Click The Create Form Button
Click The Create Form Button.
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!”

Edit The Fields Of Your Custom Form
Edit The Fields Of Your Custom Form.
Click Save form

At the bottom of this page, after you’ve made the changes according to your preferences, click the Save form button.

Click The Save Form Button
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.

Highlight And Copy The Shortcode
Highlight And Copy The Shortcode.

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.

Highlight And Copy The Shortcode
You’ll need the shortcode for the form you created earlier.

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 Pages
Click On Pages.
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.

Clcik On Edit Underneath The Sample Page
Clcik On Edit Underneath The Sample Page.
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.

The Block Editor In All Its Glory With Nothing Highlighted
The Block Editor In All Its Glory Active For A WordPress Page, With Nothing Highlighted.

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 The Three Dot Menu To Bring Up A Dropdown Menu
Click The Three Dot Menu To Bring Up A Drop Down 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.

Click On Insert Before
Click On Insert Before.
Paste the shortcode

Paste the form shortcode inside the new block you’ve just added.

Paste The Signup Form's Shortcode Into The New Block
Paste The Signup Form’s Shortcode Into The New Block.
Update the page

Click the Update button at the top right hand side of the screen to ensure the changes take effect.

Click The Update Button To Save Changes
Click The Update Button To Save Changes.
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.

Click The Preview Button
Click The Preview Button.

This opens the page in another tab. Navigating to the newly opened tab should show the form displayed on the page.

The Newsletter Signup Form On The Page Where We Added The Shortcode
The Newsletter Signup Form On The Page Where I Added The Shortcode.

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 Posts In The Left Hand Sidebar
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.

Click On Edit
Click On Edit.
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.

The Block Editor In All Its Glory Active For A WordPress Post, With Nothing Highlighted
The Block Editor In All Its Glory Active For A WordPress Post, With Nothing Highlighted.

Click on the text that begins with, “Welcome to WordPress.”

Click the three-dot menu to reveal a dropdown menu.

Click On The Three Dot Menu To Reveal A Dropdown Menu
Click On The Three Dot Menu To Reveal A Drop Down 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.

Click On Insert Before
Click On Insert Before.
Paste the shortcode

Paste the shortcode for the MailerLite signup form inside the new block you’ve just added.

Paste The Shortcode Into The New Block
Paste The Shortcode Into The New Block.
Update the post

At the top right hand side of the post, click the Update button to make sure the changes take effect.

Click The Update Button
Click The Update Button.
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.

Click The Preview Button
Click The Preview Button.

This opens the post in another tab. Navigating to the newly opened tab should show the form displayed on the page.

The Newsletter Signup Form On The Post Where I Added The Shortcode
The Newsletter Signup Form On The Post Where I Added The Shortcode.

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 Pages
Click On Pages.
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.

Clcik On Edit Underneath The Sample Page
Clcik On Edit Underneath The Sample Page.
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.

Place The Mouse Pointer Before The T And Click The Enter Button To Create A Space Above The First Paragraph
Place The Mouse Pointer Before The T And Click The Enter Button To Create A Space Above The First Paragraph.
You've Just Created A New Space Before The First Paragraph. This Is Where You'll Paste The Shortcode
You’ve Just Created A New Space Before The First Paragraph. This Is Where You’ll Paste The Shortcode.
Paste the shortcode

Paste the shortcode where you’ve created the space for the signup form.

Paste The Shortcode Into The Space You've Created For The Signuo Form
Paste The Shortcode Into The Space You’ve Created 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.

Click The Update Button
Click The Update Button.
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.

Click The View Page Link At The Top Or Preview Changes Button On The Right Hand Side
Click The View Page Link At The Top Or Preview Changes Button On The Right Hand Side.
The Newsletter Signup Form On The Page Where We Added The Shortcode
The Newsletter Signup Form On The Page Where We Added The Shortcode.

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 Posts In The Left Hand Sidebar
Click On Posts In The Left Hand Sidebar.
Click on Edit

Hover over the title of the post. This brings up a menu. Click on Edit.

Click On Edit
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.

Place The Mouse Pointer Before The W And Click The Enter Button To Create A Space Above The First Paragraph
Place The Mouse Pointer Before The W And Click The Enter Button To Create A Space Above The First Paragraph.
Paste the shortcode

Paste the shortcode into the newly created space.

Paste The Shortcode Into The Newly Created Space
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.

Cllick The Update Button To Ensure Changes Take Effect
Click The Update Button To Ensure Changes Take 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.

Click The View Post Link At The Top Or Preview Changes Button On The Right Hand Side
Click The View Post Link At The Top Or Preview Changes Button On The Right Hand Side.
The Newsletter Signup Form On The Post Where I Added The Shortcode
The Newsletter Signup Form On The Post Where I Added The Shortcode.

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 Appearance In The Left Hand Sidebar
Click On Appearance In The Left Hand Sidebar.

Click on Widgets

A dropdown menu opens when you click Appearance. Now click on Widgets.

Click On Widgets In The Dropdown Menu
Click On Widgets In The Dropdown Menu.

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.

The Widgets Page Shows Widgets On The Left And Widget Areas On The Right
The Widgets Page Shows Widgets On The Left And Widget Areas On The Right.
This Is What The Footer #1 And Footer #2 Widget Areas Look Like On The Website
This Is What The Footer #1 And Footer #2 Widget Areas Look Like On The Website.
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 On The Down Arrow Of A Widget Inside A Widget Area
Click On The Down Arrow Of A Widget Inside A Widget Area.
Click Delete

Now click the widget’s Delete button.

Click On Delete
Click On Delete.

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.

The Mailerlite Widget On The Left Hand Side Of The Page
The Mailerlite Widget On The Left Hand Side Of The Page.

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.

Click On Footer #2 To Ensure The Widget Is Added To The Correct Widget Area
Click On Footer #2 To Ensure The Widget Is Added To The Correct Widget Area.

Add the widget

Now click on Add Widget. This should add the widget to Footer #2.

Click On Add Widget
Click On Add Widget.

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.

The Widget Has A Dropdown From Which You Can Choose The Appropriate Signup Form, In The Event You Created More Than One Form
The Widget Has A Dropdown From Which You Can Choose The Appropriate Signup Form, In The Event You Created More Than One Form.

View the form

The form is now visible on the website, wherever the Footer #2 widget is active.

The Mailerlite Signup Form In The Footer #2 Widget Area
The MailerLite Signup Form In The Footer #2 Widget Area.

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.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Scroll to Top
I won't spam you and you can easily unsubscribe any time you wish.

Get excellent WordPress & marketing tutorials delivered via email