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.

Related: did you know that CSS basics are not only useful to customize Squarespace, but MailerLite and any other web-based platform too?

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.

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

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:

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.

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

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

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!

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 Custom CSS window. Then, you’ll be able to add all your form selectors in one place.

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:

LIKED THIS POST?

More Squarespace tips & tricks this way

When I talked about changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation. However, I wanted to do a separate post about it since there are some things you should consider when deciding to do it.

If you're using Squarespace's commenting system on your blog, you'll notice you can't change the color of the "Post Comment" black button through your style editor. However, today I want to show you a super easy code trick that you can use to do that and have the button match the rest of your site!

So, you want to create a custom landing page in Squarespace for an opt-in, product, tripwire or even for Instagram and you want to eliminate all distractions from the page so all your visitors have no escape, right? (insert evil laugh here). In that case you probably want to remove the header and footer from your page – otherwise why would you be reading this – so let's dive into how you can do that in your template.

Want to add some CSS to just one page on your site, that's NOT an index section? Don't want to add the code to your page's settings? Then you're going to want to find your page's unique ID to make all the changes you like on just one page of your Squarespace site. But don't worry, it's pretty easy to find. And if you're wondering, yes, this applies to any non-index page of any template!

I know I'm not the only one still running around making sure everything on my site is ready for the GDPR deadline, and since that includes setting the EU cookie banner I wanted to share a quick snippet that my lovely friend Yana Dirkx from Bliss & Gold came up with to make the awful Squarespace cookie banner look much much nicer!

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!