How to create Super Stylish Mailchimp Forms

That behave responsively…

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.

The classic (standard) Mailchimp signup form.
A responsive and stylish Mailchimp signup form.

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:

Three ways of building a responsive and stylish Mailchimp form

(Spoiler for the time pressed readers: method 3 is fast and the most flexible, even for code savvy peeps. Don’t scroll down immediately though, Method 1 and 2 still provide some valuable lessons!)

Method 1: Add CSS to the Mailchimp markup.

Let’s start with creating a responsive layout. If you have read any of my other write ups, on Medium, CoffeeCup, or cssgrid.cc you will know I am a big fan of using CSS Grid as en enhancement for for layout.

<div id="mc_embed_signup">
<form action="some" method="post" name="mc-embedded-subscribe-form">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" name="EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3">First Name </label>
<input type="text" name="MMERGE3">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" name="LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" style="display:none"></div>
<div class="response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;">
<input type="text" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" name="subscribe">
</div>
</div>
</form>
</div>
@media screen and (min-width: 40rem) {
#mc_embed_signup_scroll {
display: grid;
grid-template-columns: repeat(2 , 1fr);
grid-column-gap: 20px;
}
}
Our layout with CSS Grid applied.
@media screen and (min-width: 64rem) {
#mc_embed_signup_scroll {
grid-template-columns: repeat(3 , 1fr);
}
}
.submit-btn {
grid-column-start: 3;
}
Mailchimp form with responsive layout.

Method 2: Start from scratch

The markup I would start with is very similar to the Mailchimp one, but without the extra container inside of the <form>. Another choice I made is to nest the <input> elements inside the labels—this saves me from having to use the for attribute to specify what <input> the <label> is associated with.

<form class="my-form" action="some" method="post">
<label class="label-container">
<span class="label-text">Your first Name please</span>
<input value="" type="text" placeholder="For that..."
name="" required="required">
</label>
<label class="label-container">
<span class="label-text">Your last Name</span>
<input value="" type="text" placeholder="So we can...."
name="">
</label>
<label class="label-container">
<span class="label-text">E-mail</span>
<input value="" type="email" placeholder="This is..."
name="" required="required">
</label>
<button type="submit" class="submit-btn">Subscribe</button>
</form>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700');.my-form {
display: grid;
grid-template-columns: (1 , 1fr);
align-items: end; }
.label-container {
margin-bottom: 1rem;
}
.label-text {
display: inline-block;
margin-bottom: 3px;
padding: .35rem;
background-color: #6079ff;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
font-family: 'Montserrat', cursive;
}
input {
display: block;
min-height: 50px;
width: 100%;
padding: 6px;
border: 1px solid #4f4f4f;
border-radius: 0px;
box-shadow: rgba(10, 10, 10, .05) 0 1px 4px 0 inset;
}
.submit-btn {
padding: 14px 16px;
margin-bottom: 1rem;
min-height: 50px;
border-radius: 4px;
background-color: #f57afc;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 16px;
font-family: 'Montserrat';
color: #fff;
}
I stylish and responsive Mailchimp form, created from scratch.
<form action="https://tech.us19.list-manage.com/subscribe/post?u=60c954a156793e3e0eb052134&amp;id=*******" method="post">
<input value="" type="email" placeholder="This is..." name="EMAIL" required="required">

Method 3: Visual Form design

There are quite a few web form services out there, but none of them actually allows for creating a fully customized design. Enter Form Designer!

Which method should I choose?

That depends a bit on the specific situation. I have a strong feeling that Method Zero—running with the Mailchimp default styles—is not an option. A form that is well integrated into the site’s brand look and feel will convert better than something that feels ‘slapped on’. However, feel free to test this for your situation and leave me a comment here if I got this wrong…

I help companies make briljant digital products and solid device-agnostic user experiences.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store