How to create Super Stylish Mailchimp Forms

We all know Freddie, the @Mailchimp mascot. He is a well dressed chimp that behaves friendly under all circumstances. The recently refined design did not change that, Freddie will still be greeting you with a friendly wink.

MailChimp Image

Unfortunately, the signup forms Mailchimp provides are less friendly. Clearly winking is a bit of a stretch for signup forms. But responding to something simple as the screen width should not be too much to ask for these days right?

Yet their layout remains rigidly stacked across all viewport widths, making them less friendly for usage on wider screen like tablets, desktops (and up).

That’s not all—asking them to be stylish and adapt to the look and feel of the site that hosts them is met with a complex explanation about CSS Hooks. This makes many Mailchimp signup forms feel like a strange, ‘slapped on’, component. Not sure what I mean? Let’s have a look:

MailChimp Image

In contrast to the product layout above the form (and the tiny bit of the footer that’s visible below it), the form layout does not adapt to the available space. It’s not responsive, the inputs simply grow to enormous proportions.

The form is not very stylish either. Although some styles can come from any framework that might be used, making it the fit slightly better than the ‘raw’ Mailchimp looks, the labels are not in line with the typography used on the site. The standard Helvetica is not terrible, but still pretty far from the Karla / Montserrat combo used in this design. The inputs don’t have the border (radius) of the site, and the color scheme is different too. Sure, the form works, but it’s not a super friendly fit.

Here’s the good news— with a little bit of extra effort all of this can be fixed! I will get back to that in just a bit, first let’s have a look at an embedded signup form that has really stylish moves going on:

MailChimp Image

This form makes great use of the available space—at full width the three inputs neatly line up with the product grid above them. The typography is an exact match and the color scheme a great fit. Even the borders play along nicely…which brings me to the question:

Which of these two embedded forms will convert better?

The one that stands out, yet provides a smooth fit at any device width and is part of the overall design? Or the one that gives you the awkward feeling that it’s slapped on the site? Once you made up your mind think about this:

What does a 1% increase in conversion ratio mean for your business? And what about a 10% increase? For some business a slightly better conversion can make a huge difference at the bottom line. I bet even Mailchimp would love it since their income is tied to the size of the lists…

Clearly this would need but be tested, but to do so, it has be created first. Time to see how we can pull this off!

Three ways of building a responsive and stylish Mailchimp form