Just copy paste this template code in your mailchimp signup form code and you will be all set to go with a new design. You can edit all fields and colors as your flavor.
It’s always become a big headache when we think to change default template of mailchimp signup form on our website. I have searched a lot, tried a lot and truly after burning 3 hours of my life I was just banging my head to screen where are these templates…Simply no where!
I have some websites with code stuff but the way they were suggesting me to do was so complicated and lengthy that I finally decided to make my own template because I suddenly understand that I can change the whole thing just after playing a little bit in CSS properties.
Here is the result for what I finally made. You can see it working at right bar of this page.
So coming back to the point. All what you need to do is just sign in your mailchimp account and copy your signup form “naked” code. Just paste it in any custom module where you want to install that form and replace following code with your code.
Don’t forget to cut this line from your code and paste it somewhere else you will need to replace this line after ending up editing.
“<form id=”mc-embedded-subscribe-form” class=”validate” action=”http://yourwebsite.us120-dg7.list-manage.com/subscribe/post?u=8e345cbe246341dc04f29a0e3&id=be7a2e7ac5″ method=”post” name=”mc-embedded-subscribe-form” target=”_blank”>”
Also keep in mind that this tutorial is based on 2 fields first is “your name” and second is “email address” as you can see in picture above.
Here is the code:
|<!– Begin MailChimp Signup Form –>
<div style=”background-color: skyblue; margin-top: 5px; margin-bottom: 5px;”>
<div id=”mc_embed_signup”><form id=”mc-embedded-subscribe-form” class=”validate” action=”http://yourwebsite.us120-dg7.list-manage.com/subscribe/post?u=8e345cbe246341dc04f29a0e3&id=be7a2e7ac5″ method=”post” name=”mc-embedded-subscribe-form” target=”_blank”>
<div style=”font-size: 16px; font-weight: bold; margin-bottom: 5px; margin-left: 2px; padding-bottom: 2px; padding-top: 5px; text-align: left;”>Get updates via <img src=”images/rss_icon.jpg” border=”0″ style=”margin-bottom: -3px;” /> to your email</div>
<div style=”color: white; font-size: 12px; margin-left: 2px; font-weight: bold;”><label for=”mce-FNAME”>Your Name </label> <input id=”mce-FNAME” style=”border: 0 none; box-shadow: 0 0 2px grey; height: 25px; width: 200px; margin-left: 30px; margin-bottom: 3px; margin-top: 3px; text-shadow: 0 0 1px lightgrey; border-radius: 5px; font-size: 15px;” type=”text” name=”FNAME” value=”” /></div>
<div style=”color: white; font-size: 12px; margin-left: 2px; font-weight: bold;”><label for=”mce-EMAIL”>Email Address </label> <input id=”mce-EMAIL” style=”border: 0 none; box-shadow: 0 0 2px grey; border-radius: 5px; height: 25px; width: 200px; margin-left: 9px; margin-bottom: 10px; text-shadow: 0 0 1px lightgrey; font-size: 15px;” type=”email” name=”EMAIL” value=”” /></div>
<div id=”mce-responses” class=”clear”> </div>
<div style=”color: #ff0000;”><input id=”mc-embedded-subscribe” style=”background-color: lightblue; border: 0 none; color: black; font-size: 22px; font-weight: bold; height: 35px; text-shadow: 0 1px 1px white; width: 301px; padding: 0;” type=”submit” name=”Subscribe” value=”Subscribe” /></div>
You are done??? Not at all:)
You will need to work on CSS as per your requirement and your website layout like width, height, margin, color, fonts…. a lot more work need to be done from your side.
Don’t forget to replace your code which I already highlighted with red in above code example. If you don’t want to go in this hectic then I suggest you to simply start editing mailchimp’s naked signup form code to replace “class” with “style”
While I was surfing for this thing I have found one solution at 7 Custom MailChimp Email Signup Forms which in my opinion is a good solution especially when they are offering 7 free templates to download but again the problem is the process which will definitely take hours to implement successfully and truly I don’t have time even to try this. You can go with it if your nerves are strong enough:(. I would love to get your comments if you did it in a quick way.
For experts I just want to say that actually I have replace “class” with “style” in my Div tags. I think only this clue is enough for geeks to start the game and make it final. You can reply me in comments if getting any issues while working with it. I will try my best to get you out of your problem.