How to Add a MailerLite Email Opt-In to WordPress

BySheilla Luciana

While I use Mailchimp as the default form for demo purposes on all of my WordPress themes, you can easily swap the Mailchimp block with other email opt-in platforms of your choice. In this post, I’ll show you how to use MailerLite as a signup form, integrate it with your WordPress site, and style it to blend seamlessly with your theme.

This tutorial might look lengthy, but that’s just because I’ve broken down each step in detail. Follow it as outlined, and you’ll have everything set up in under 30 minutes.

Step 1: Install the MailerLite Plugin

The first step is getting the MailerLite plugin running on your WordPress site.

  1. Log into your WordPress dashboard.
  2. Go to Plugins > Add New.
  3. Search for “MailerLite” in the search bar.
  4. Find the plugin called Official MailerLite Signup Forms and hit Install Now.
  5. When the installation finishes, click Activate.

Step 2: Connect MailerLite to WordPress

To make everything work, you’ll need to link your MailerLite account to WordPress. This is done with an API key, which is just a fancy way of connecting the two systems.

  1. Log into your MailerLite account.
  2. Go to the Integrations section.
  3. Under MailerLite API, look for API and click Use.
  4. If you don’t have an API key yet, generate one by clicking Generate New Token.
  5. Copy the API key.

Now, back in WordPress:

  1. Go to MailerLite > Settings in your WP dashboard.
  2. Paste the API key into the field and click Save.

Step 3: Create a MailerLite Interest Group

If you don’t have any Interest Groups set up in your MailerLite account yet, you will have to create one first before moving to the next step. Otherwise, feel free to skip this step and continue to Step 4.

How to create an Interest Group on MailerLite
To create an Interest Group you will have to go to your MailerLite account’s dashboard:

  1. Navigate to Subscribers > Groups
  2. Click the Create Group button
  3. Enter a group name that represents your audience, and click the Create button.

Step 4: Create a MailerLite Signup Form

You can create or use a form from your MailerLite dashboard, but for this purpose we’re going to create a custom form directly in WordPress to ensure it matches the design of your theme.

Back to your WordPress dashboard:

  1. Create a New Form
    On your WordPress dashboard, head to MailerLite > Signup Forms. Click on Add New.
    Under Form Type, choose Custom signup form and click the Create form button.
  2. Name Your Form
    Add a title for your form. You can keep it simple but descriptive, something like “Newsletter Signup” or “Blog Updates Form”. Hit the Create form button.
  3. Assign a Group
    Choose the Interest Groups to subscribe people who submit this form. Then, hit the Create form button.
  4. Customize Your Fields
    Click the Form Fields and Interest Groups tab. By default, you’ll see an email field. For this design, it works well to include one more field and I’d recommend adding “Name” or “First Name”. You can drag and drop the fields to adjust their order.
  5. Save Your Form
    Once you’re happy with the setup, hit Save form. You’ll see a shortcode appear below the form title. Copy this shortcode, as you’ll need it for the next step.

Step 5: Add the Form to a WordPress Page

Now that your form is ready, it’s time to add it to your page. If you’re not using Kadence, you can simply paste your form’s shortcode into a shortcode block anywhere on your page.

For Kadence users, follow these steps to style your form and enhance its design:

Click the plus (+) icon

Select Section to add a Section block into your page editor. You can insert this block wherever you’d like to replace the default Mailchimp block.

On the Section block’s settings, go to the Advanced tab and scroll down to locate the Custom CSS tab.

Select either the horizontal or vertical-style form below and paste the code inside the Custom CSS field:

This code creates a horizontal-style form

selector .mailerlite-form-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1em auto;
}
selector .mailerlite-form-inputs > * {
  flex: 1;
}
selector .mailerlite-form-inputs label {
  display: none; /* Change none to block if you want to show the label */
}
selector .mailerlite-form input,
selector .mailerlite-form button {
  padding: 15px 25px;
  border: 0; /* Remove 0 to 1px if you want to have a border */
  width: 100%;
  font-size: 0.9em;
  line-height: 1.5em;
}
selector .mailerlite-form-title,
selector .mailerlite-form-description {
  display: none;  /* Change none to block if you want to show the title and description */
}

@media screen and (min-width: 768px) {
  selector .mailerlite-form-inputs {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 20px;
  }
  selector .mailerlite-form .mailerlite-form-field {
    margin-bottom: 0;
  }
}

This code creates a vertical-style form

selector .mailerlite-form-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1em auto;
}
selector .mailerlite-form-inputs > * {
  flex: 1;
}
selector .mailerlite-form-inputs label {
  display: none; /* Change none to block if you want to show the label */
}
selector .mailerlite-form input,
selector .mailerlite-form button {
  padding: 15px 25px;
  border: 0; /* Remove 0 to 1px if you want to have a border */
  width: 100%;
  font-size: 0.9em;
  line-height: 1.5em;
}
selector .mailerlite-form-title,
selector .mailerlite-form-description {
  display: none;  /* Change none to block if you want to show the title and description */
}

Finally, insert a Shortcode block within the Section block and paste your form’s shortcode.