How to Customize MailerLite Forms with CSS

So, you decided to go with MailerLite as your email marketing service? Awesome! Join the club.

It’s pretty good isn’t? Although to be honest, it’s not that “pretty”.

If you’re using MailerLite’s default embedded forms in your site, you’re probably annoyed that you can’t really style them to match your site’s look. I mean, seriously, the options on the editor are VERY limited.

On the bright side, since you have access to the full form code, you can basically edit anything you want, you only need to know what to look for.

Let’s find out how to customize your MailerLite forms with CSS.

Important: your form id is unique, so don’t modify it! Where the snippets of this post read #mlb2-5526781 leave the number you have on your own form code!

 

Ready? Let’s go!

How to customize your MailerLite embedded forms through CSS.

 

Creating the form

For this tutorial, the following are the initial settings we’ll be working with. If you want to follow along by tweaking your own go ahead and skip this part!

1. Go to the Form tab in MailerLite and create and embedded form. Give it the name you like and add the following details.

Adding the details to a MailerLite embedded form

2. Next, go to the Design tab and set these parameters in the dropdown menus. As for the rest, the only thing I changed was the alignment of the title.

Setting the design for a MailerLite embedded form.

3. Hit save and click on Show HTML to copy the entire code of your form.

Showing the HTML code of a MailerLite embedded form.

4. Paste the code in a code block in Squarespace.

Adding a MailerLite embedded form in a Squarespace code block.

 

Editing the code

Inside that huge chunk of code, there are a couple of things you can look for to edit your title, paragraph text, button and overall form style.

 

1. MODIFYING THE FORM TITLE

To edit the title you’ll want to look for a selector that looks like this, since by default MailerLite form titles are h4s:

#mlb2-5526781 .subscribe-form .form-section h4

So let’s say we want to change the font family, it’s color, size and bottom margin. Since those are properties already set for our selector, we only need to change their values from these:

#mlb2-5526781 .subscribe-form .form-section h4 {
margin: 0px 0px 10px 0px !important;
padding: 0px !important;
color: #000000 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 28px !important;
line-height: 100%;
text-align: center !important;
}

To these:

#mlb2-5526781 .subscribe-form .form-section h4 {
margin: 0px 0px 15px 0px !important;
padding: 0px !important;
color: #101115 !important;
font-family: 'futura-pt', sans-serif !important;
font-size: 39px !important;
line-height: 100%;
text-align: center !important;
}
Changing the title of a MailerLite embedded form.

 

2. ALTERING THE PARAGRAPH TEXT

Alright, to style the text you’ll need to look for the following selector, since our paragraph is a p element:

#mlb2-5526781 .subscribe-form .form-section p

In this case we’ll also be changing the font family, color and size, and adding a new declaration to set the alignment of the text to the center.

The whole snippet looks like this:

#mlb2-5526781 .subscribe-form .form-section p,
#mlb2-5526781 .subscribe-form .form-section li {
line-height: 150%;
padding: 0px !important;
margin: 0px 0px 10px 0px;
color: #000000 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 14px !important;
}

And we’ll be changing it to this:

#mlb2-5526781 .subscribe-form .form-section p,
#mlb2-5526781 .subscribe-form .form-section li {
line-height: 150%;
padding: 0px !important;
margin: 0px 0px 10px 0px;
color: rgba(40,26,23,.6) !important;
font-family: 'Minion Pro', serif !important;
font-size: 19px !important;
text-align: center!important;
}
Changing the style of the paragraph text in a MailerLite embedded form.

If you’re curious about the additional selector (#mlb2-5526781 .subscribe-form .form-section li), it corresponds to the list items of a bullet point list. If you use a list – for example to highlight the benefits of joining your newsletter – it would have the exact same style as your paragraph text.

 

Note that I changed sans-serif for serif as the fallback font in the font-family declaration. This is to make sure that a similar font style will be displayed in case there’s any problem rendering our chosen font.

 

3. STYLING THE FORM BUTTON

The button is using the following selector: 

#mlb2-5526781.ml-subscribe-form button

And we’ll be changing its color, font family, font size, fixing the space between letters, and adding more height.

So, we'll be going from this:

#mlb2-5526781.ml-subscribe-form button {
border: none !important;
cursor: pointer !important;
width: 100% !important;
border-radius: 0px !important;
height: 40px !important;
background-color: #000000 !important;
color: #FFFFFF !important;
font-family: 'Arial', sans-serif !important;
font-size: 16px !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
position: relative!important;
}

To this:

#mlb2-5526781.ml-subscribe-form button {
border: none !important;
cursor: pointer !important;
width: 100% !important;
border-radius: 0px !important;
height: 50px !important;
background-color: #47a0ff !important;
color: #FFFFFF !important;
font-family: 'ff-good-headline-web-pro-condensed', sans-serif !important;
font-size: 15px !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
position: relative!important;
letter-spacing: .1em;
}
Styling the button of a MailerLite embedded form.

Now as you can see we have a problem because the height of the email field is not the same as the button’s. To fix it, we need to look for the field selector:

#mlb2-5526781.ml-subscribe-form .form-group .form-control

And then tweak the height to match the height of our button (50px) and use the !important rule so the change takes effect.

#mlb2-5526781.ml-subscribe-form .form-group .form-control {
width: 100%;
font-size: 13px;
padding: 10px 10px;
height: 50px!important;
font-family: Arial;
border-radius: 0px;
border: 1px solid #cccccc !important;
color: #000000 !important;
background-color: #FFFFFF !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: left;
}
Changing the height of the fields in a MailerLite embedded form.

 

4. STYLING THE FORM

Lastly, let’s add more space all around the content so the form doesn’t takes up more room in our page.

We’ll go to the beginning of the code in our block to find the selector:

#mlb2-5526781 .subscribe-form

And there, we’ll tweak the padding property: 

#mlb2-5526781 .subscribe-form {
padding: 20px;
border: 0px solid #F6F6F6 !important;
background: #f6f6f6 none !important;
border-radius: 0px !important;
box-sizing: border-box !important;
}

and set it to 60px and important, so the change takes effect on all 4 sides of the form.

#mlb2-5526781 .subscribe-form {
padding: 60px!important;
border: 0px solid #F6F6F6 !important;
background: #f6f6f6 none !important;
border-radius: 0px !important;
box-sizing: border-box !important;
}
Making larger MailerLite embedded forms.

There you go! Now you can easily modify your MailerLite form to fit with the style of your site.

The final result of customizing a MailerLite embedded form with CSS.

 

5. BONUS: ADDING A HOVER MODE TO THE FORM BUTTON

To make sure your audience gets the same effect when hovering over the form button and any other button on your site, let’s make some changes.

You’re going to need to copy the selector for the button and paste it either on the same code block, or in your CSS injection window. For this tutorial we’ll be keeping it on the same code block right below the closing bracket of the normal button selector:

#mlb2-5526781.ml-subscribe-form button {
border: none !important;
cursor: pointer !important;
width: 100% !important;
border-radius: 0px !important;
height: 50px !important;
background-color: #47a0ff !important;
color: #FFFFFF !important;
font-family: 'ff-good-headline-web-pro-condensed', sans-serif !important;
font-size: 15px !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
position: relative!important;
 letter-spacing: 0.1em;
}

#mlb2-5526781.ml-subscribe-form button {

}

After adding the :hover pseudo-class to your selector you’ll end up with this:

#mlb2-5526781.ml-subscribe-form button:hover {

}

Perfect.

 

Now, let’s take a look and see what the hover effect of our current Squarespace buttons is. An easy way to do this is by using Inspect Element over any button on your site, going to the first tab that’s sitting on the top-right corner of the window (:hov) and selecting :hover to display the changes that happen in that state.

Using inspect element on a MailerLite form button.

In this case, the button’s opacity gets set to .8, so that’s what we’ll be changing in our form button.

 

Returning to our code block, we’re going to set our opacity property to .8 inside our new selector’s brackets like so:

#mlb2-5526781.ml-subscribe-form button:hover {
opacity: .8;
}

And once you hit Apply and then Save, you’ll be able to see your new hover mode in action!

Adding a hover mode to MailerLite's embedded form button.

TO KEEP IN MIND

  • Remember your form id (#mlb2-5526781) is unique to each of your forms. This means that if you want to make the same edits to several forms, you’ll need to either add the same changes to each code block, or simply copy and paste the selectors and the modified properties to your CSS injection window. Then, you’ll be able to add all your form selectors in one place.

    In this case, our CSS injection window would have the following snippets:
    /*Form Title*/  
    #mlb2-5526781 .subscribe-form .form-section h4 {
    margin: 0px 0px 15px 0px !important;
    color: #101115 !important;
    font-family: 'futura-pt', sans-serif !important;
    font-size: 39px !important;
    }
    /*Paragraph text*/  
    #mlb2-5526781 .subscribe-form .form-section p,
    #mlb2-5526781 .subscribe-form .form-section li {
    color: rgba(40,26,23,.6) !important;
    font-family: 'Minion Pro', serif !important;
    font-size: 19px !important;
    text-align: center!important;
    }
    /*Button*/ 
    #mlb2-5526781.ml-subscribe-form button {
    height: 50px !important;
    background-color: #47a0ff !important;
    font-family: 'ff-good-headline-web-pro-condensed', sans-serif !important;
    font-size: 15px !important;
    letter-spacing: .1em;
    }
    /*Email Field*/ 
    #mlb2-5526781.ml-subscribe-form .form-group .form-control {
    height: 50px!important;
    }
    /*Form*/ 
    #mlb2-5526781 .subscribe-form {
    padding: 60px!important;
    }
    /*Button Hover Mode*/ 
    #mlb2-5526781.ml-subscribe-form button:hover {
    opacity: .8;
    }
    To add new forms, we would only need to copy/paste the corresponding selector, add it to its respective snippet separating it from other selectors by a comma, and switch the form number. For example if we now have a second form with and id of #mlb2-0000000, our code would end up looking like this:
    /*Form Title*/  
    #mlb2-5526781 .subscribe-form .form-section h4, #mlb2-0000000 .subscribe-form .form-section h4 {
    margin: 0px 0px 15px 0px !important;
    color: #101115 !important;
    font-family: 'futura-pt', sans-serif !important;
    font-size: 39px !important;
    }
    /*Paragraph text*/  
    #mlb2-5526781 .subscribe-form .form-section p,
    #mlb2-5526781 .subscribe-form .form-section li, 
    #mlb2-0000000 .subscribe-form .form-section p, #mlb2-0000000 .subscribe-form .form-section li
    { color: rgba(40,26,23,.6) !important; font-family: 'Minion Pro', serif !important; font-size: 19px !important; text-align: center!important; } /*Button*/ #mlb2-5526781.ml-subscribe-form button, #mlb2-0000000.ml-subscribe-form button { height: 50px !important; background-color: #47a0ff !important; font-family: 'ff-good-headline-web-pro-condensed', sans-serif !important; font-size: 15px !important; letter-spacing: .1em; } /*Email Field*/ #mlb2-5526781.ml-subscribe-form .form-group .form-control, #mlb2-0000000.ml-subscribe-form .form-group .form-control { height: 50px!important; } /*Form*/ #mlb2-5526781 .subscribe-form, #mlb2-0000000 .subscribe-form { padding: 60px!important; } /*Button Hover Mode*/ #mlb2-5526781.ml-subscribe-form button:hover, #mlb2-0000000.ml-subscribe-form button:hover { opacity: .8; }

And that's how you can edit your embedded MailerLite forms with CSS. It's pretty simple so don't be afraid to experiment beyond the changes made in this tutorial! 

 

Until next time,
B.


GET YOUR HANDS ON THE CHEATSHEET

And learn more about the CSS properties used in this tutorial so you can customize your forms further!

SEE IT NOW
Take a look at how you can customize your MailerLite embedded forms, to fit your Squarespace site look