How to Customize MailChimp Email Signup Forms WordPress

by Miguel · July 15, 2012

Transfer Windows and Installed Data to Another Hard Drive

Here are instructions for installing and Customize MailChimp Email signup forms onto your website (be sure to watch the entire video for full installation instructions)

1. To fully accomplish this you need to have access to your site via FTP.

2. This Video Tutorial is for WordPress only.

3. Download the Images and instructions from here

4. This post was created based on Derek Halpern post.

Video Tutorial:

STEP 1) Follow the instructions on this page on how to get an optin code (make sure you get the ‘NAKED’ form):

http://kb.mailchimp.com/article/how-can-i-add-my-signup-form-on-my-website

After you follow those instructions, you should now have a code that looks
something like this:

<!– Begin MailChimp Signup Form –>
<div id=”mc_embed_signup”>
<form action=”http://kolakube.us2.list-manage.com/subscribe/post?u=ba2d7d2ff28fe4f2581509340&id=a355e20f0d” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” target=”_blank”>
<h2>Subscribe to our mailing list</h2>
<div><span>*</span> indicates required</div>
<div>
<label for=”mce-EMAIL”>Email Address <span>*</span>
</label>
<input type=”email” value=”” name=”EMAIL” id=”mce-EMAIL”>
</div>
<div>
<label for=”mce-FNAME”>First Name </label>
<input type=”text” value=”” name=”FNAME” class=”” id=”mce-FNAME”>
</div>
<div id=”mce-responses”>
<div id=”mce-error-response” style=”display:none”></div>
<div id=”mce-success-response” style=”display:none”></div>
</div> <div><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe”></div>
</form>
</div>

<!–End mc_embed_signup–>

————————————————————————–

STEP 2) Once you have that code, make the following changes to it:

a) Replace:

<div id="mc_embed_signup">

with:

<div id="optin">

—————————

b) Remove ALL <label> but keep ALL <input> tags.
They look like this:

<label for=”mce-EMAIL”>Email Address <span>*</span></label>

You can also remove the extra <div> tags:

<div>

<div><span>*</span> indicates required</div>

(MAKE SURE YOU REMOVE THE CLOSING </DIV> AT THE END AS WELL)

—————————

c) To add the name icon and email icon into the forms, add the following
CSS classes to the specified <input> tag.

(If you aren’t asking for their name, don’t worry about adding)

class=”name”

class=”email”

(in some cases, may already be added)

EXAMPLE FOR NAME: <input type=”text” value=”Enter your name” name=”FNAME” id=”mce-FNAME”>

EXAMPLE FOR EMAIL: <input type=”email” value=”” name=”EMAIL” id=”mce-EMAIL”>

—————————

d) 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.

So for example, if I want the input box asking for people’s email to say “Enter your email”
I just do this:

value=”Enter your email”

EXAMPLE FOR EMAIL: <input type=”email” VALUE=”ENTER YOUR EMAIL” name=”EMAIL” id=”mce-EMAIL”>

—————————

e) Now, into those same <input> fields (name and email), 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” id=”mce-FNAME” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”>

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

—————————

f) You may need to adjust the size of your <input> fields, so add this attribute to your
name/email fields:

size=”30″

EXAMPLE: <input type=”text” SIZE=”30″ value=”Enter your name” name=”FNAME” id=”mce-FNAME” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”>

…of course, you may need to adjust this value

—————————

After those steps, your optin form code should be fine. You should have
something like this when you’re done:

<!– Begin MailChimp Signup Form –>
<div id=”optin”>
<form action=”http://kolakube.us2.list-manage.com/subscribe/post?u=ba2d7d2ff28fe4f2581509340&id=a355e20f0d” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” target=”_blank”>

You can paste this code wherever you want to use your optin form.

Now, final step (after you’ve uploaded the images you received in the download
to your /images/ folder in Thesis) is to make sure you paste the following CSS
into custom.css:

<!–
OPEN UP YOUR CUSTOM.CSS FILE, AND PASTE THE FOLLOWING CODE
NOTE: MAKE SURE YOU HAVE UPLOADED THE IMAGES PROVIDED IN THE DOWNLOAD
INTO YOUR /IMAGES/ FOLDER IN THESIS
–>

#optin {
background: #6c6c6c url(images/gloss.png) no-repeat bottom center;
border-bottom: 3px solid #6c6c6c;
color: #fff;
padding: 20px 15px;
text-shadow: 1px 1px #111;
}
#optin input {
border: 1px solid #585858;
font-size: 15px;
margin-bottom: 10px;
padding: 8px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #5a5a5a;
-moz-box-shadow: 0 2px 2px #5a5a5a;
-webkit-box-shadow: 0 2px 2px #5a5a5a
}
#optin input.email { background: #fff url(images/email.png) no-repeat 10px center; padding-left: 35px }
#optin input.name { background: #fff url(images/name.png) no-repeat 10px center; padding-left: 35px }
#optin input[type=”submit”] {
background: #f6640e url(images/orange.png) repeat-x top;
border: 1px solid #a44913;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: bold;
padding: 8px 0;
text-shadow: -1px -1px #562806;
text-transform: uppercase;
width: 100%
}
#optin input[type=”submit”]:hover { color: #ffdeb3 }