Introduction to MailerLite Embedded Forms and Adding Them to Your Site

Posted by Donna

DISCLOSURE: This site may contain affiliate links. WOWIT Enterprises Inc. may get paid, at no additional cost to you, if you buy something or take an action after clicking one of those links. Please read the Disclosure Policy for more information.

MailerLite embedded forms can be the perfect way to encourage subscribers to your website. But they can also be a bit intimidating.

Do you want to be able to create a form and get it on your site as quickly as possible? You just need the basic steps, in the right order, to take you there.

Learning any new software can be overwhelming. You can avoid that frustration with clear, straight forward information. And that’s why I enjoy writing these types of posts.

I enjoy teaching people new things. But my degree is in software. So I combine the two to help others figure it out. ?

MailerLite Overview

MailerLite is an ESP (Email Service Provider). Why would you want to use an ESP:

You want to include forms on your site to encourage signup AND you want different options to activate those forms – embedded, pop-up, buttons, links, etc.
You want to include automated sequences of email to respond to subscribers, instead of doing that manually.
There are lead magnets/opt-ins/freebies you want to give away to your subscribers and need an efficient way to do that.
Web hosting providers are not designed for sending/receiving a lot of email. So use a service that is.

Why should you choose MailerLite? Simple – MailerLite has an amazing suite of features and offers almost all of that functionality FREE to you until you exceed 1000 subscribers.

Most other ESPs have free programs but they usually offer only a portion of the functionality. And that’s why I chose MailerLite for my own site!

MailerLite email marketing for small business

Creating MailerLite Embedded Forms

MailerLite embedded forms have a lot of different editing options: content text/images, design, settings, formatting, etc. And those are best depicted “live.”

So I’ve included a video recording of my screen as I walk you through the creation process. Including all those different editing options that are not necessarily obvious when you’re just starting out.

But there are two other concepts to note first.

1. Subscriber Groups

Each form you create will be linked to a subscriber group. This is handy for setting up automated email workflow sequences (a subject for a future post).

A form in MailerLite must have a subscriber group. If you’re not sure how you want to approach subscriber groups right now then choose either:

Create a separate group for each form – this is my recommendation
Create a single group for all new forms. Something like “New” or “Signup.”

You’ll have statistics available in MailerLite to track subscriber groups. These are useful when you want to understand how your subscribers arrived – which form they used to become a subscriber.

2. Email Flow

There are four (4) different elements potentially related to each form. It’s important to understand the flow and interaction so you can decide where to include different information.

1. Subscribe form – this is the actual form people will see first and where they’ll enter their information. On the form, you want to include a link to your privacy policy at a minimum. I also recommend you do some research into GDPR (General Data Protection Regulation) and CCPA (California Consumer Privacy Act). These might affect the information you display on your forms.

2. Success message – after someone clicks the button on the subscribe form, they’ll see the success message. Here, you want to clarify for them what will happen next. Maybe you’ll review their email manually or maybe you’re going to send them a freebie. Put that information here.

Also, they’re NOT truly subscribed yet if you’ve enabled double opt-in. If they need to confirm their email, let them know. See the next point below.

3. Double Opt-In Email – you choose whether or not you’ll allow a subscriber to signup instantly or whether they need to confirm their email (to prove they’re not a spam bot). I use double opt-in as one technique to avoid unpleasant spam issues on my site.

If you choose to enforce double opt-in then you want to edit that email as well. Make it match your branding, modify the button text, etc.

4. Double Opt-In Thank You page – this is displayed after someone confirms their email. When they see this, then they’re actually officially subscribed.

NOTE: Video includes captions (subtitles).

Add MailerLite Generic Code to WordPress Site

Now that you have a MailerLite embedded form created, you want to put it on your site. How exciting!

In order for MailerLite to “connect” with your website, you need to add some code. There is a specific code snippet to add just to confirm the communication: website <–> MailerLite.

You have three (3) different ways to add this code snippet:

1. Manually update header php files – I don’t recommend this for most people. Unless you’re comfortable with code or you have experience with other websites, I suggest you avoid this option. And I do not provide any instructions for this option in the video.

2. Use a plugin – this is a great option for almost everyone. Plus, once it’s installed, you’ll be able to use it for other instances where you need to add code snippets. For example, setting up Google Analytics.

The plugin I recommend is “Insert Headers and Footers” by WPBeginner. WPBeginner is very reputable and there are over 900,000 people using that plugin.

3. Theme built-in features – if you use Elegant Themes (Divi, Extra, etc.) or the Genesis Framework then you have built-in features to add this code. I use Elegant Themes and that’s what I explain in the screen-recorded video.

You copy the one-time code snippet from MailerLite and paste it into the Integration tab of your Theme Options. Into the “Add code to the < head > of your blog” section.

Any snippets added to this section appear at the bottom of the header section – below all the header details. So you could add your code snippet to the beginning or the end of this section – no difference.

NOTE: Video includes captions (subtitles).

Adding MailerLite Embedded Forms

You can have many different MailerLite embedded forms on your website. For each form you create, there will be a related code snippet.

This is not the same as the one-time code snippet added above. That was for the primary communication between your website and MailerLite.

Each form has its own information that is contained within a code snippet. And the code snippet dictates the way the form appears on the screen. So there are different code snippets for different methods of display.

The different methods of displaying MailerLite embedded forms:

Standard embedded display onscreen
Button with text – clicking on the button displays a pop-up form
Link with text – clicking on the link displays a pop-up form

Add Forms Using WordPress Gutenberg Block Editor

If you’re not using Elegant Themes (Divi Builder) then you can add forms using the WordPress Gutenberg block editor. This is the standard editor that exists, by default, on all WordPress installations.

You would:

In WordPress Gutenberg editor, click the plus sign inside a circle (Add Block) and select the “Shortcode” block
Decide how you want to display your form: onscreen, button, or link. In MailerLite, copy the relevant code snippet for that display method.
In WordPress, paste that code snippet into the Shortcode field where it says, “Write shortcode here…”

NOTE: Video includes captions (subtitles).

Add Forms Using Elegant Themes Divi Builder

If you are using Elegant Themes and Divi Builder then your path is a bit different.

You would:

In WordPress, “Edit With The Divi Builder”
Insert a section and a row, then insert either a text module or a code module. Both of these will work but I recommend you use the code module.
Decide how you want to display your form: onscreen, button, or link. In MailerLite, copy the relevant code snippet for that display method.
In WordPress, paste that code snippet into the Code section (or the Text tab if you used a text module)

NOTE: Video includes captions (subtitles).

Using the MailerLite Plugin

If you’re adding MailerLite embedded forms for onscreen display, then you have another option. Instead of logging in to your MailerLite account and copying a code snippet every time, you can use the MailerLite plugin.

The MailerLite plugin assigns a shortcode with a unique form id to every form you’ve created. Then you just insert the shortcode where you want the form to display.

Plugin Installation

You would:

On your WordPress site, install the plugin
From MailerLite, get your API code from the WordPress integration
On your site, in the MailerLite plugin settings, paste the API key in “Enter an API key”

Identifying MailerLite Embedded Forms

Now the plugin is ready for use. But you need to identify all your forms:

On your WordPress site, from the MailerLite plugin, select “Signup forms” then “Add New”
Select “Forms created in MailerLite” then “Create form”
Use the drop-down next to “Webform” to add an existing form from MailerLite
Change the default name, “New embedded signup form”, to something specific to that form

Do this for each form you’ve created in MailerLite. Then whenever you want to include a form to display onscreen, just copy the form-specific shortcode from the plugin.

NOTE: Video includes captions (subtitles).

Ready, Set, Embedded Forms!

That was a lot of information! If you’ve been following along then you now have a form on your site, ready for subscribers.

You learned a bit about what an Email Service Provider (ESP) can do. You created your very own embedded form in MailerLite and decided whether you wanted to enable double opt-in.

Your site now has the generic code snippet installed that will allow communication with MailerLite. And you’re familiar with the different display methods for embedded forms: onscreen display, button click event, or link click event.

Most importantly, you added the form-specific code snippet to include your form on your site. And you know you have the option to use the MailerLite plugin as well.

If you’re not already using Elegant Themes, check it out: