fbpx
Kristen Leigh | WordPress Web Design Studio | Email Opt-In Forms | Best Places to Add Email Opt Ins on Your Website

WordPress and MailerLite Tutorial [Part 1 Email Marketing Series]

Pick an email provider 

Set up your account 

Create your first list 

Add opt in forms on your website… no check?

Does this sound familiar?

It’s easy to find information on why you need to grow your email list. One study showed that the ROI on email marketing is around 4,300%! That’s about equal to the increase in happiness I felt after we brought my puppy home 4 1/2 years ago. It’s a game changer!

But after you do the research on a platform… (should you pick MailChimp or MailerLite for a free email service provider or should you go all in and use ActiveCampaign or ConvertKit for a more advanced, paid email service provider?)

After you set up your account…

And after you create your first list…

You have to figure out how to actually grow the damn list you just created. The first step is adding an opt in form to your website.

But how?

Googles: “How to add email opt in forms on my website.”

I’m starting a 4 part series to walk you through the process of integrating your WordPress website with email service providers MailerLite, MailChimp, ConvertKit, and ActiveCampaign.

[Part 2 Email Marketing Series] WordPress and Mailchimp Tutorial

[Part 3 Email Marketing Series] WordPress and ConvertKit Tutorial

how to integrate wordpress and mailerlite

So you picked MailerLite? You have good taste. I use MailerLite, too!

Get started by logging into your MailerLite account and going to the Forms tab.

How to Add a MailerLite pop up opt in form on your WordPress website

Let’s start with the opt in form you may want to skip but absolutely need to have, the pop up email opt in form.

Setup

1. Click “Create Popup”

2. Give your popup a name that is easy to understand (For example, mine is called Freebie 1 Popup because I have multiple freebies. I’ve made a note elsewhere to remind myself what Freebie 1 is.) and click “Save and Continue”

3. Select the group you want people to be added to when they opt into your list through this popup form and click “Save and Continue”

Design

1. Now select a template to use (Need a recommendation? Use the design shop template)

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Tutorial Pick a Template for Popup Optin Form

2. Edit the design using your branding and add copy that explains what people receive by signing up

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Tutorial Update Design for Popup Optin Form

3. Click on “Success” in the top menu to edit the design of the page people see after they sign up for your list

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Tutorial Update Success Design for Popup Optin Form

4. Once you’re done editing the design, click save to edit the behavior

Behavior

1. Under Mode, adjust the settings so the popup appears exactly when you want it to (Not sure what to do? I always set mine to appear 10 or so seconds after someone lands on my website)

2. Under Frequency, select how often you want someone to see the popup if they haven’t subscribed (Not sure what to do here either? I always set mine to Always Show)

3. Under Visibility, choose what pages you want the popup to appear on. Do you want people to only get the popup on the homepage? Or also on your services page? Maybe you don’t want it to appear when someone goes directly to your blog. Click “Save and Continue”

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Behavior for Popup Optin Form

Install Tracker

(You only have to do this step once, even if you make multiple forms.)

Option 1 = The Easy Way!

Install the Official MailerLite Sign Up Forms plugin and it will do this for you automatically.

Option 2 = The Advanced (but also easy) Way!

Copy the JavaScript snippet and paste it into the < head > of your website. Where you find this varies by theme and page builder but you should be able to locate it somewhere. If you can’t, just use option 1!

When you’re done, click Next.

By default the popup will be set to PAUSED and keep it that way until we’re positive the popup form is ready to go.

Double check that you have Double Opt-In on. This will kick off an email to people when they subscribe to your list asking them to confirm they want to be on your list and hear from you on a regular basis. This is GDPR compliant!

Confirmation Email

Head over to the Confirmation Email tab to edit the text and design of the confirmation email, which also acts as the double opt in email.

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Tutorial Edit Confirmation Email for Popup Optin Form

Confirmation Thank You Page

And lastly, click on Confirmation Thank You Page to edit the design and text on the page people land on after they confirm their subscription.

How to create a MailerLite landing page for your WordPress website

Now that you have a popup opt-in form added to your website, it’s time to create a landing page. A landing page is always speaking about one single thing. In this case, that thing is downloading your freebie or joining your email list. You can add the link to your landing page on your Facebook business page, in your Facebook group description, in your Pinterest account description, or in your Instagram bio in order to direct even more traffic to this page and increase the number of subscribers on your email list exponentially!

Head on over to the Forms tab in your Mailerlite account and click on Landing Page.

Setup

1. Click “Create Landing Page”

2. Give your landing page a name that is easy to understand (for example, mine is Resource Library landing page) and click “Save and Continue”

3. Select the group you want people to be added to when they opt into your list through the landing page (or create a new group by clicking the “Add new group” button in the top left hand corner and click “Save and Continue”

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Tutorial Add New Group for Landing Page

Design

1. Select the template you prefer to start designing (Not sure which one to pick? If you’re giving away a freebie or giving access to a content library, the Lead Generation or Ebook templates are perfect)

2. Depending on the template you selected, you’ll have different design settings that can be adjusted. This includes adding your logo and linking to your website, setting navigation links, updating background colors/images, adding your own text, adding testimonials, and adjusting what information you capture.

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Tutorial Update Design for Landing Page

3. Click “Next” when you’re done designing your new landing page

Landing Page URL

1. If you have a free plan, you won’t be able to use a custom domain (such as kristenleighdesigns.com) but instead will only be able to update the slug (the text that comes after your domain, kristenleighdesigns.com/slug). Either set your slug or create your full custom URL if you have the paid plan.

2. Adjust the SEO settings by giving your page a title such as “Kristen Leigh Designs | Free Web Design Resource Library” (Always include your business name and include keywords that explain what the page is about), updating the meta keywords, and adding a meta description that is one sentence long and describes the purpose of the page

3. Copy and paste the SEO title and meta description into the Facebook Share Title and Facebook Share Description fields and then add an image for a final touch!

4. Click “Save and Continue”

Confirmation Email and Confirmation Thank You Page

Follow the same steps from the popup opt in form tutorial to finish setting up your confirmation email and confirmation thank you page.

Test and Set it Live!

Once you have your landing page complete, test the page by entering your email address into the field. Make sure it’s working correctly and then link to that page everywhere!

How to embed a MailerLite opt-in form on your WordPress website

The final type of opt-in form that you want to add to your website is an embedded form. An embedded form can appear anywhere on your website, from your homepage to your about page, to the footer on every single page.

Head on over to the Forms tab in your Mailerlite account and click on Embedded Forms.

Setup

1. Click “Create Embedded Form”

2. Give your embedded form a name that is easy to understand (for example, mine is Resource Library embedded form) and click “Save and Continue”

3. Select the group you want people to be added to when they opt into your list through this form and then click “Save and Continue”

Design

With embedded forms there are no templates to choose from. However, you can change the layout in the design section by clicking “Change” under the design options. There are 3 different options to choose from, default, horizontal, and card.

Kristen Leigh | WordPress Web Design Studio | WordPress and MailerLite Tutorial Change Design for Embedded Form

If you’re trying to add a thin bar below the primary banner on your homepage, select horizontal. This option sets the opt in fields next to each other followed by the opt-in button. On the other hand, if you’re adding this somewhere else on your homepage and want to include an image, select card. Stick with default if you want a stacked opt-in form without an image.

Continue designing the opt-in form to include text, brand colors, etc. and then move onto the Success tab to design what people see after they opt-in.

Confirmation Email and Confirmation Thank You Page

Again, don’t forget to design the confirmation email and confirmation thank you page by following the same steps from the popup opt in form tutorial above.

Embed

Now it’s time to embed the opt-in form!

1. Scroll all the way down to the bottom of the Form Settings section

2. If you’ve entered the javascript in the < head > tag, then copy and paste the code provided at the bottom of the screen into a code block on your website wherever you want the form to appear

3. If you haven’t entered the javascript in the < head > tag and you haven’t’ installed the MailerLite plugin, click on “HTML” to find the correct code you’ll need to enter into a code block on your website

4. One final option is to have the form appear as a popup when a link is clicked. To do this, click on “Show popup on click event” to locate the code for a button and the code for a text link. Copy and paste whichever code you choose into a code block on your website

If you don’t have an email list yet, get started with MailerLite! (It’s what I use and I love it.)

-Kristen

*Hey hey! This post contains affiliate links. I don’t promote products, tools, or services I’ve never used before or that I don’t absolutely love. By clicking the link and making a purchase, I may receive a percentage of the sale.

You Might Also Like…

Kristen Leigh | WordPress Web Design Studio | How to Start Building Your List with MailerLite
Kristen Leigh | WordPress Web Design Studio | Connect MailerLite to Your WordPress Website
Kristen Leigh | WordPress Web Design Studio | How to Use MailerLite with Your WordPress Site

Grab Your FREE Guide!

Kristen Leigh | WordPress Web Design Studio | 3 Ways to Increase Sales and Attract High-End Clients Using Consumer Psychology on Your Webiste

*I promise to never spam you or share your email address with anyone else!