How to Customize MailChimp Embed Form

Follow the steps below to make your MailChimp sign up form look much nicer.

MarketingSalesFacebookInbound MarketingPerspectivesNews

Enter your name and email below to receive all our valuable blog posts straight to your inbox.

Are you tired of looking at an ugly MailChimp form on your website? If so, you’re in the right stop. We’re going to review how to customize MailChimp embed form.

Whether you’re a blogger, business owner, solopreneur or something in-between, most likely you’re collecting email addresses to stay connected with your customers or blog readers. Here at Uhuru Network our preferred email marketing service is MailChimp and we use it for our business, blogs and for our clients. We love MailChimp’s easy-to-use interface and the variety of customization options the service provides.

But one thing we do not like about MailChimp is the default signup form. See Below.

Subscribe to our mailing list

* indicates required


The importance of maintaining the aesthetics of your website design dictate that you might want this MailChimp signup form to look completely different than the default. This means that you’ll want to change the fonts, colors, input field or size.

Today, we’re going to walk you through the steps to customize your MailChimp form. Follow the steps below to customize your MailChimp embed form. You can follow each step to get it looking just like the example or just copy and paste the ending code and replace with your embed form code.

A Step by Step Guide to Customize Mailchimp Embed Form

Follow steps below to customize MailChimp embed form.

1. Get your opt-in form code

When in your MailChimp account – select the list you want to create a sign up form for and choose the ‘Naked’ option. This form provides only the raw HTML with no styling (CSS or JavaScript). This is the best option to use when customizing your form.

How to customize mailchimp embed form

2. Make the Following Changes to the Code

a) Replace:

<div id="mc_embed_signup">
with:
<div id="mailchimp">

b) Remove ALL <label> tags but keep ALL <input> tags

<label for="mce-EMAIL"> Email Address  <span class="asterisk">*</span></label>

You can also remove the extra <div> tags:
<div class="mc-field-group">
<div class="clear">
<div class="indicates-required"><span class="asterisk"">*</span"> indicates required</div>

(make sure you remove the closing </div> at the end as well)
c) Customize input field text

Inside the <input> tags is an attribute called value=””. Any text you put in between the quotes will show up by default inside the input form.

For example, if I want the input box to say “Enter your email”.

Just do this:
value=”Enter your email”

Example for Email: <input type="email" VALUE="ENTER YOUR EMAIL" name="EMAIL" CLASS="EMAIL" id="mce-EMAIL">

d) Add code to end of input field

This code will make it so when people click inside the input field, the default text you add under the value=”” attribute will disappear, thus giving them space to enter their info into the form.

Add this to the very end of the <input> tag:

onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"

Example: <input type="text" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

 

f) Adjust the size of your <input> fields

Adjust the size of your input field as you need.

size=”30″

Example: <input type="text" SIZE="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

 

After these steps your option form should look something like this:

<!-- Begin MailChimp Signup Form -->
<div id="mailchimp">
	<form action="Replace with your MailChimp code" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">

		<input type="email" size="30" value="Enter your email" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
		<input type="text" size="30" value="Enter your name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

		<div id="mce-responses" class="clear">
			<div class="response" id="mce-error-response" style="display:none"></div>
			<div class="response" id="mce-success-response" style="display:none"></div>
		</div>

		<div class="clear">
			<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
		</div>
	</form>
</div>
<!--End mc_embed_signup-->

 

3. Add styling to your css file

After you added the opt-in form to your website you need to make it look nice. Copy and paste the following CSS into your website css file.

#mailchimp {
	background: #f8f8f8;
	color: #3D6392;
	padding: 20px 15px;
}
	#mailchimp input {
		 border: medium none;
    color: gray;
    font-family: times new roman;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 10px;
    padding: 8px 10px;
    width: 300px;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
	}
		#mailchimp input.email { background: #fff }
		#mailchimp input.name { background: #fff}
		#mailchimp input[type="submit"] {
			background: #115B87;
			color: #fff;
			cursor: pointer;
			font-size: 15px;
			width: 35%;
			padding: 8px 0;

		}
			#mailchimp input[type="submit"]:hover { color: #F2C94C }

If you followed all these steps correctly you should have something that looks like this. Customizing a MailChimp embed form can be a pain and it takes a couple of trys to get it to look like you want to but with a little hard work your Mailchimp form can look great.

 

Receive Email Updates

Enter your email to receive Uhuru Insider updates.


 

 

22 thoughts on “How to Customize MailChimp Embed Form

  1. Wow. I’ve used many tutorials to customize my Mailchimp opt-in box, and this is by far the most effective. Thanks for your help!

  2. OMG Vanessa! I made some slight adjustments to it but I am so pleased with how it came out I had to tell you. See it here under FoneDJ Tools: http://fonedj.com. It’s a one page site so you have to scroll down. Thank you.

  3. Its great tutorial but can you tell us more about error & success messages? Thank you very much!

  4. I’ve been playing around with this and seems to give me the flexibility I need. Thanks. One thing, I get a 404 when I try to submit an e-mail address. Previously with the ‘Naked’ Mail Chimp form I got the Mail Chimp response form. Do I need to somehow link the Mail Chimp response form to your new code?

  5. This tutorial was just what I was looking for and worked perfectly. I’ve been able to tweak the appearance to my liking. Thanks a bunch!

  6. Thanks a lot for this tutorial. It is exactly what I needed. I have one problem left:
    In Firefox it looks and works perfect, but in InternetExplorer it looks ugly. For example is the button noncolored and the text is not centered. In Firefox it is. What do I have to change for that?

  7. Thanks this worked for me. Once comment would be when you click into the field, the text “enter your email” for example, remains inplace rather than being overwritten. You can see this also in your example box but in your subscription box at the top of the page this doesn’t happen.
    Any suggestion on how to overwrite the field text?
    Thanks

  8. Your steps works like a charm and I tried it on one of my pages and it works. So, I have to say Thank You very much.

    The only improvement that I have to comment is the response on the form after the email has been submitted. It does not tell the user whether the entry was successful since the form is still there. But I guess it is already too much to ask. Thanks again!

  9. Hi,
    Could you please guide me how to make subscribe form the same way that you have added at the top of this page? I really like this style and I want to add it the same way on my website.

    Many thanks.
    Sarah

  10. This came out beautifully. Only problem I am having is it is not completely responsive. Hard to describe the issue I’m having. Even if I use percentages for the field size, the fields are bigger than the phone screen. If I make it small enough to fit, it look terrible on the computer. 🙁

    Currently, trying to work it out through further css. Fingers crossed.

  11. I have set this up and it looks good but it doesn’t appear to subscribe anyone to our mailchimp list when I test it. Any advice? :S

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A Quick & Easy Guide on GDPR Compliance for Marketing & Sales

Email marketing isn’t going away. It’s just gaining greater transparency. Basically, companies just need to be much less haphazard about collecting and storing email addresses and need to also have better communication with prospects.

Categories: Marketing Read Article

Your Ultimate Guide to Marketing Objectives (Define, Measure & Examples)

Strategic and clear marketing objectives are fundamental to any sound, effective marketing plan. Your marketing objectives are your brand’s clear-cut, defined goals. Beyond this, you can look at your marketing objectives as a way to provide clear direction for your team members to follow. Without defined goals, there’s no clarity on what needs to be […]

Categories: Business Strategy Read Article

Sales Email Deliverability Guide: How To Avoid Email Spam Filters

I was plugging away with my sales outreach and not giving it much thought when I started to have issues with email deliverability. The following steps are exactly what we used to solve the problem, and you can use them to ensure that more of your emails end up in the inbox of your intended recipients, too.

Categories: Sales Read Article