Creating a Simple MailChimp Newsletter Signup Form for Foundation 5 Framework

By Mike Johnston September 2, 2014 Articles and Editorials

I had a hard time finding good articles that guide you through this process so to help save anyone who may be looking to use the awesome Foundation Framework from Zurb and need to create a super simple MailChimp signup or subscription form with it, I thought I'd share the process.

This process will work with almost any newsletter provider including Aweber but for the sake of this tutorial, I'm only going to show you how to do it with Mailchimp since that happens to be what I use for our sites.

To get started, determine where you are going to place your signup form within your website. As you know, with Foundation, using the grid system, it's very easy to scale content to fit into almost anywhere. For the purposes of this tutorial, you'll want enough space to allow the form fields to be wide enough. If you look at the bottom of this very article, you'll see an implementation of the exact form I'm going to teach you how to make.

First, log into your Mailchimp account and go to your list. Click the dropdown beside  Stats and choose  Signup Forms

signup form foundation

Now you'll see this screen, click  Embedded Forms.

foundation signup form

Now click on the tab labeled  Naked  and copy the code from the  Copy/Paste Onto Your Site section. It should look like this:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action=" //myawesomewebsite.us8.list-manage.com/subscribe/post?u=a1b2c3d4ef5g67891hij1234&amp;id=a123b45cd6 " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<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> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_d6c7b9e3bb5b63272adf08873_b544c97fe8" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div> <!--End mc_embed_signup-->

The only piece of this code you'll need is the form action piece, which I've made bold in the above code. Copy this and put it into notepad or something similar.

Now to create your form, simply take the following code and insert your copied form action as shown below:

<h5>Get free exclusive content and contests in our weekly email!</h5>
<div id="mailchimp_form">
<div class="row signup">
<div class="small 12 columns end">
<form action=" //myawesomewebsite.us8.list-manage.com/subscribe/post?u=a1b2c3d4ef5g67891hij1234&amp;id=a123b45cd6 " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="row panel radius">
<div class="medium-4 columns">
<label for="mce-FNAME" class="mce-labels">First Name</label>
<input type="text" value="" name="FNAME" class="required radius" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
</div>
<div class="medium-5 columns">
<label for="mce-EMAIL" class="mce-labels">Email Address</label>
<input type="email" value="" name="EMAIL" class="required email radius" id="mce-EMAIL" placeholder="Email" required>
</div>
<div class="medium-3 columns">
<label for="mc-embedded-subscribe" class="mce-labels">Subscribe</label>
<input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
</div>
<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 style="position: absolute; left: -5000px;">
<input type="text" name="mailchimp-number" tabindex="-1" value="">
</div>
</div> <!-- /row panel radius inputs -->
</form>
</div>
</div> <!-- / row signup -->
</div>

Place this code snippet where you want the form to appear and you are done. Of course, feel free to style as needed. Here's what your form will look like:

I hope you found this tutorial useful, if you did, please share. Thanks for reading.

Mike Johnston

Mike Johnston Author

Mike started CMS Critic in 2008 and has become a recognizable face and valued expert in the world of content management. He has worked with many small business and enterprises to establish their online presence and to assist with marketing strategies. If you are interested in working with him, drop him a line.

About CMS Critic

CMS Critic is one of the top resources on the web for unbiased, honest reviews. Since 2008, we've provided a resource for readers worldwide to find information, get advice and discover the latest news about software, hardware and services such as Content Management Systems, Website Builders, Linux Distributions and much more. To learn how to contribute or work with us, drop us a line.

Follow Us