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.
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:
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:
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 a10% 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
(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.
Normally I would use a Feature Query for (the very few) browsers that don’t support ‘Grid’, but here that’s not even needed—these browsers simply won’t understand what’s going on and continue to display the form as Mailchimp handed it to me: 4 stacked elements at any width.
Before we can work on the layout we need to have a basic understanding of the Mailchimp form markup. Here’s a simplified version that I will briefly explain below:
<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>Mailchimp puts the actual <form> in a <div> with an ID of mc_embed_signup. For layout purposes, we can ignore both these elements. What follows is a <div> that I bolded, which contains the elements we actually want to position.
The first three elements are all so called “mc-field-groups”. These <div>’s contain the input element, as well as the label that describes the input.
The fourth element contains two <div>s that are hidden. This is where error messages would go if the user makes a mistake filling out the form.
The fifth element is for deceiving robots. It is positioned off screen and if it is filled out Mailchimp will know that a robot was involved, and not process the submit.
The last element is the actual submit button. This bring us to 6 elements, of which 4 are visible to the user. Placing them in 2 neat columns for wider (tablet) screens with CSS Grid is super fast and easy, here’s the code:
@media screen and (min-width: 40rem) {
#mc_embed_signup_scroll {
display: grid;
grid-template-columns: repeat(2 , 1fr);
grid-column-gap: 20px;
}
}This little bit of code tells the <div> that contains our form elements to behave as a grid parent (display: grid) at screen widths of 40rem and up. The grid parent provides 2 columns (grid-template-columns) each of which can take up the same amount of left over space (1fr). A gutter of 20px (grid-column-gap ) provides the needed space between the columns. The grid rows don’t need to be specified, they are generated on an as needed basis.
CSS Grid is really powerful, but can take a little to get used to. If you are interested in learning more I suggest to read my article transition from a Bootstrap Grid to CSS Grid. You can also find a great amount of resources (and a free app) on cssgrid.cc. After you finished reading this article of course…
With these few lines of code our form elements know to behave as grid children and will position themselves automatically in the resulting grid cells.
Close, but no cigar. The element that is supposed to seduce the bots does not bother us here, it is positioned off the screen... However, the container that was reserved for response messages (invisibly) takes up the place of where the button is supposed to go. Bummers!
Here’s why: CSS Grid places the elements in the grid cells according to their order in the HTML. Knowing that makes this one is easy to solve, we just need to place the button container above the response message box.
There are other ways. Elements can also be placed according to specific rules—let’s use that for when we will be making further layout adjustments for wider screens.
For viewports with width over than 64rem we want to place all input elements next to each other. A three column structure that can be created with the following CSS:
@media screen and (min-width: 64rem) {
#mc_embed_signup_scroll {
grid-template-columns: repeat(3 , 1fr);
}
}This places the three inputs in a row, but the button container will be positioned in the next available grid cell, which is on the left below the Email input. To place it on the right, we can use one of the positioning rules a referred to be before:
.submit-btn {
grid-column-start: 3;
}Using line-based placement we tell the browser to place the submit button container on the right of the third column grid line, past the 20px gutter. The submit-btn class was not part of the original Mailchimp markup, so don’t forget to add that to the button container!
To make it look exactly as in the original example some more style tweaks would need to be made, the button, for example, needs to get a width of 96% to be the exact same width as the input box above. Other style updates would need to be made to the border(-radius), paddings, some vertical alignment changes to the button and so on.
While doing so you might end up fighting the default Mailchimp styles quite a bit. Would it be preferable to start from scratch?
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.
I did however add placeholder text. Just some little additional clues for the people willing to fill out the form. The overall result is still a slightly slimmer version of the markup we saw before:
<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>Clearly you could still add the Mailchimp response container, the robot deception element, and associated scripts as well—it won’t make a fundamental difference on how we are going to style the visible fields.
Without any styles applied the looks of the form depend a bit on the default styles a specific browser applies. This is the ‘raw’ look in Firefox:
So yes, instead of fighting the Mailchimp styles, we are going to battle the browser defaults. Basically that means we have to specify styles for (almost) every aspect of the form elements.
If you want to stay away from writing CSS, or if you want to focus on design without having to think about code, Method 3 will definitely be the best choice. You will still pick up a thing or three reading from Method 2, so don’t scroll down right way!
Still here? Cool, then let’s talk some CSS. One of the first things we need to do now is line up (stack) the elements on small screens, just like Mailchimp does by default. The CSS belonging to the .my-form class in the code block below takes care of that.
@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;
}
The rest of the CSS simply specifies colors, backgrounds, typography and so on. Please note that if you want to copy and paste this to try it for yourself to also include the Grid definitions for wider screens that we discussed in Method 1. Clearly you should also use a browser that supports CSS Grid…
With that you should get a result very close to the original example:
Now, would this form actually work? Not yet, but it’s awfully close!
There are only two things left to do: 1) make sure the data is submitted to the corresponding Mailchimp list, and 2) assure that the data goes into the matching fields in that list.
For both items you can find the answer in the embed code Mailchimp gives you. In your Mailchimp account, select your list and then Signup forms. Then the embed code will be located below the Preview in the Copy/paste into you site section:
To submit to the right list you need to copy the address value for the action attribute. You can find this at the very beginning of the <form> element in the Mailchimp embed code. It will look something like the bolded text below:
<form action="https://tech.us19.list-manage.com/subscribe/post?u=60c954a156793e3e0eb052134&id=*******" method="post">The bolded part needs to replace the “some” in action=”some” in the HTML markup I showed at the start of Method 2. With that the form will post to the correct list. Now we need to tell the form what user input goes what Mailchimp list field.
To submit the data to the right fields, the value of the name attribute of each input element needs to match the value Mailchimp has given them. For the “Email” input name they use EMAIL, for “Last name’ this is LNAME and for “First name” they use MMERG3 (I know…).
Just to illustrate the point, the input for the email address would come to look like this:
<input value="" type="email" placeholder="This is..." name="EMAIL" required="required">With the form action and name values completed, your custom styled Mailchimp signup form is ready to rock the docks!
Time to look at the fastest and easiest method! (No worries, all the knowledge you gathered above will still be of great help).
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!
It is a unique app that focuses on the design aspects of form creation only, and does a great job at that too. When done, the app provides the hooks to be connected to any script. Or to Mailchimp lists for that matter!
Full disclosure: I am apart of the CoffeeCup team who produces this amazing tool. But I’ll prove to you why it is definitely the best choice for making super stylish responsive forms.
The app opens with the <form> container already in place. To get the HTML structure we need it is just a matter of clicking on the elements and they will be inserted into the form. This takes like 5 seconds…
With the markup in place, we can already start adding the styles. This will take longer than 5 seconds, but, for this form, it should not take longer than 3 minutes either…
Scroll and click through the controls on the Style pane, find the aspects you want to tweak and configure them to your liking. Most of what CSS has to offer is available through these visuals controls, so initially it might take a little to find what you are looking for. But the advantage is that as soon as you get the hang of it, the form design possibilities are close to limitless.
And here’s the exciting part: changing the layout is as fast as adding elements and design styles! It’s difficult to believe without seeing this, so I made a little video with some layout action:
Pretty slick right? A responsive form layout coded in a jiff! And with that, the signup form design is actually complete already. The only thing that remains is making sure it posts to the right list and Mailchimp fields, very similar to what we did in Method 2. Instead of finding the right code section and pasting the Mailchimp value for the appropriate attribute, with Form Designer you select the element and paste the code in the corresponding (input) box.
So, with the <form> container selected, the action URL is pasted in the action box in the elements properties area.
And as mentioned earlier in this article, this action URL can simply be copied from the embed code Mailchimp provides.
The Name fields of the three Input elements are populated in a similar way— find the value of the Name attribute in the Mailchimp code and paste it in the corresponding Name box in Form Designer. For example, with the Last Name input selected LNAME goes in the Name box.
With the mapping completed it’s just a matter of hitting the export button and pasting the fully functional custom designed form in you site.
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…
The real choice here is between hand coding and fully visual design. If you are code savvy, either method works. For me personally I feel my design are more creative when I use a visual tool—it is easier to explore options and try different paths. Form Designer also offers some other perks such as Placeholder text and a validation script with corresponding (customizable) error messages.
If you would like to work with the code from Method 1 or 2, or with the Form Designer project file, please drop me a note below and we will connect!
