Subscribe form on MailChimp

Subscribe form on MailChimp

This article covers how to update the Newsletter Subscription Form in the footer of most themes to post to MailChimp.

1) You will need to get the form code for the mailing list from MailChimp.

The code should look like this:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//username.us2.list-manage.com/subscribe/post?u=f43923ac30fa2a2634d239rk1&id=c786d2f8m4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<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 class="mc-field-group">
<label for="mce-COMPANY">Company </label>
<input type="text" value="" name="COMPANY" class="" id="mce-COMPANY">
</div>
<div class="mc-field-group">
<label for="mce-STATE">State </label>
<input type="text" value="" name="STATE" class="" id="mce-STATE">
</div>
<div class="mc-field-group">
<label for="mce-COUNTRY">Country </label>
<input type="text" value="" name="COUNTRY" class="" id="mce-COUNTRY">
</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;" aria-hidden="true"><input type="text" name="b_f43923ac30fa2a2634d2391ee_c786d27f04" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

2) There you only need part of this code. On the site, go to the footer/template.html template and find and remove the following code:

<input type="hidden" name="list_id" value="1">
<input type="hidden" name="opt_in" value="y">

And:

<input name="inp-submit" type="hidden" value="y" />
<input name="inp-opt_in" type="hidden" value="y" />

3) Now look for this code:

<form method="post" action="[%URL type:'page' id:'subscribe' https:'1'%][%END URL%]">

4) Replace this code with the form tag located in your mailchimp code. It should look something like this:

<form action="//username.us2.list-manage.com/subscribe/post?u=f43923ac31342332634d239rk1&id=c334444" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

5) Locate the following code in footer/template.html:

<input name="inp-email" class="form-control" type="email" value="[%nohtml%][@inp-email@][%/nohtml%]" placeholder="Email Address" required/>

6) Replace it with this:

<input name="EMAIL" id="mce-EMAIL" class="form-control required email" type="email" placeholder="Email Address" />

7) Add the following line above the </form> tag:

<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f43923ac30fa2a2634d2391ee_c786d27f04" tabindex="-1" value=""></div>

8) Save Changes. Test the form by entering a valid email address. You should take to a thank-you page on the MailChimp website. You should also receive an email to confirm the subscription.


Was this article useful?

Be notified when this page is updated. Optional.