MailChimp Subscription form

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

Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:

• Read through the Introduction to Maropost Commerce Cloud Document to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Step 1: Generate the MailChimp form code

Firstly, you will need to generate the embedded MailChimp form code. Don't worry about adjusting settings as you'll only need the form tag from this code.

The code should look like this:

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://username.us2.list-manage.com/subscribe/post?u=8deff23a27c4289caa2b3014c&id=c334444" 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</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;" aria-hidden="true"><input type="text" name="b_8deff23a27c4289caa2b3014c_425dc95755" 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-->

Step 2: Open the footer template

Navigate to the footer template /httpdocs/assets/themes/[THEME-NAME]/templates/footers/template.html.

Step 3: Add MailChimp code

Replace the following form tag, highlighted here, with your MailChimp form tag. It should look something like this:

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

Step 4: Remove code from the template

Remove the following input code from the default newsletter subscription, highlighted here.

Step 5: Replace the default email input

Replace the email input code highlighted here, with the following code:

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

Step 6: Add code into the template

Add the following line of code above the closing </form> tag, highlighted here:

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

Step 7: Test form

Save the template and test the form by entering a valid email address. This should take you to a MailChimp thank you page and should add the subscriber to your MailChimp account.

The final subscription form code should look something like this:

[%if [@config:show_newsletter_subscribe@]%]
    <p>Subscribe to our newsletter and we'll keep you up to date on our products and services.</p>
    <form action="https://username.us2.list-manage.com/subscribe/post?u=8deff23a27c4289caa2b3014c&id=c334444" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="input-group">
            <input type="email" value="" name="EMAIL" class="form-control required email" id="mce-EMAIL" placeholder="Email Address">                            
            <div class="input-group-append"><input class="btn btn-outline-secondary" type="submit" value="Subscribe" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"/></div>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="y" class="terms_box" required/>
                I have read and agree to
                <a href="#" data-toggle="modal" data-target="#termsModal">Terms & Conditions</a> &
                <a href="#" data-toggle="modal" data-target="#privacyModal">Privacy Policy</a>.
            </label>
        </div>
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f43923ac30fa2a2634d2391ee_c786d27f04" tabindex="-1" value=""></div>
    </form>
[%/if%]