A couple of months ago I was following along with all the other bloggers that used Mailchimp dreaming about using Convertkit because of its automation and tagging. Are you in this boat? Well, I happened to hear about a different email provider and after checking it out I decided to jump boat to try something different. The email provider was MailerLite and you can see exactly why I switched on this post. Now I really love almost everything about this new provider but one thing I was struggling with was how to customize MailerLite forms.
Some links in this post are affiliate link for your convenience, click here to read our full affiliate policy.
The forms were not matching the design of my blog. They did not have my header font plus the letter-spacing was different on my blog. Let me show you an example. The image on the left is the form without customization but the right does have the customization.
Can you see the difference?
Don’t worry the process is fairly easy to do plus it gets even easier after doing it once or twice.
Here are some things to keep in mind before you edit anything:
- Your form number inside the code is unique, so DON’T modify it! Starts with #mlb
- The fonts we used are Google Fonts and make sure whatever font you are using is installed on your site.
LEARN SOME BASIC CODE
Something you will have to learn is basic HTML code. Don’t worry you don’t have to memorize the code, you just need to understand it. I shared a post about the basic code every blogger should know and this will help you when customizing any HTML code. Plus I provided a FREE printable with all the code on it to make it easy for you to find.
Another thing you will want to know is what the code is on your blog. This way you can match the design of the blog to this email form.
If you’re freaking out that this will be hard please don’t! There is a very easy way to find your blog’s code, it’s a trick and all it takes is viewing your website. See the trick on my post checking your blog’s code. Don’t worry I will wait while you learn the secret!
Now that you have your Basic Code Printable and your blog being viewed on another web page (so you can see the code). Let’s edit the MailerLite form.
EDIT THE CODE
For this example, we are going to be using Embedded forms. These forms can be embedded between post text, the footer, the sidebar, or anywhere on your blog. The MailerLite forms are pretty but you want them to have the same style as your blog.
CREATE THE FORM:
- Sign into your MailerLite account. From the top bar, click on “Webforms”.
- Inside webforms click “Add New Webform”.
- Name the form to your liking then click “Save and Continue”.
- Next click on “Create Embed Form”.
- Select your subscriber group and click continue.
- Now you are going to see something like this:
- Before editing your form decide if you want a Double Opt-In (confirmation email). If you do, make sure the opt-in is “ON” then design your “Confirmation Email” and “Confirmation Thank You Page”.
- Back to the subscribe form you should now adjust your “Design” of the form. Don’t worry if it does not look exactly like you want you will be adjusting the code to match your liking.
- Next, adjust the “Field” tab. I like to have my subscribers add their first name and email. You can change the order, if the field is required, and the name inside this tab.
- Now back to the “Detail” tab, adjust your “Button Title” and “Thank You Message”.
- If you are using the double opt-in you will want to change the message to remind the reader to check their email to confirm the subscription.
Now it is time to add your text!
EDIT THE SOURCE CODE:
- You will not be using the title box so make that text blank.
- Click on the source code.
- A new window will appear and you will see the text is inside <p> HTML tag.
- Add your code!
Here is an example of some code:
- Remember how you have your blog opened in another webpage? Now it’s time to use it
- Check the code on your widget Title. The code you find will be used in the form under the first <p> tag.
- Then check the code for the text inside your widgets. Add code that is needed to your form.
- Here is what my code looks like after.
- Check your design and save.
- A new window will show the code to place on your website. Click on the link “Show HTML”.
- Again a new window will pop up with your HTML code. Copy the Code.
- Open Notepad (PC) or TextEdit (MAC) on your computer. Paste the code from MailerLite.
- Inside the code, you just pasted, find these two selectors. It will start with #mlb2-# (this is your form number).ml-subscribe-form .form-group .form-control and the selector below for the button.
- On the first selector adjust the font-family
- For the button adjust the code to the style of your website button.
- I adjusted the font-family, font-size, padding, plus I added letter-spacing and font-weight.
- Now if you scroll down you will find this section. This is what your form says. Inside this code, I like to remove the “*” from the form fields. The “*” means it’s required but I like the look without.
- This is your code!!!
ADD CODE TO WEBSITE
Now that you have your code you can copy and paste it onto your website.
- Under the Appearance tab click widgets.
- Inside the widget find the Text open. Add the widget to the desired location and paste your forms code
- Save the text widget and check your website!
- Inside a post or page, click the text tab.
- Find the location you want to add the form and paste the code.
- Preview the page.
Here is an example of the form we created during this tutorial on my blog (the top form) then the bottom form a MailerLite form without any customization. What do you think?
HOW TO CUSTOMIZE MAILERLITE FORMS
This process might seem a little long to get the look you want but I think MailerLite is worth the little extra work. Plus you could just paste the regular code onto your website after adjusting the source code!
I hope this tutorial will help you customize your MailerLite forms! Do you have any questions? Or additional tips?
*Affiliate links may be contained in this post. If you click on an affiliate link and buy something, we may receive a small commission. But it does NOT result in you paying a dime more for that item. The affiliate money we earn helps pay for running a blog and doing more projects. Thanks so much for your support!*