Global Footer Newsletter Form and MailChimp

[Zinbar]

I want to keep the styling of the Shadows "Global Footer Newsletter Form" but make the required changes to push the email address to MailChimp. I can't find any docs on this.

[Matt Zimmermann]

Hi Earl,

If you are using the MailChimp module, you could use the form as the basis of the layout as shown in the documentation [ https://docs.miva.com/how-to-guides/mailchimp ]. If you are using MailChimp directly, you can copy the action, hidden form fields, and form names from MailChimp and place them in the given form in Shadows.

[Zinbar]

Hey Matt

I am using the module. Just having a hard time figuring out how to take the correct part of the MailChimp module's suggested code.

<div class="mailchimp">
<div class="mailchimp_title">Newsletter Signup</div>
<div>
<input class="mailchimp_email" data-mailchimp-identifier="global-mailchimp-email" type="text" name="Email_Address" placeholder="Email Address" />
<input class="mailchimp_button_signup" type="button" title="Sign Up" value="Sign Up" onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' );" />
</div>
<div class="mailchimp_message" data-mailchimp-identifier="global-mailchimp-message">Sign up to receive coupons, discounts and product updates.</div>
</div>

And place the correct items into the Shadows newsletter box code. I want to keep the current look and feel on Shadows.

<form class="t-newsletter-form c-collapsible-menu">
<input id="t-newsletter-form" class="c-collapsible-menu__trigger" type="checkbox">
<label class="c-collapsible-menu__label u-text-uppercase" for="t-newsletter-form">Join Our Newsletter</label>
<h5 class="c-menu__title u-text-uppercase">Join Our Newsletter</h5>
<fieldset>
<legend>Join Our Newsletter</legend>
<ul class="c-form-list">
<li class="c-form-list__item c-control-group c-control-group--rounded u-flex">
<input class="c-form-input c-control-group__field u-bg-white u-border-none t-newsletter-form__input" type="email" name="email" value="" placeholder="Enter your email">
<button class="c-button c-control-group__button u-bg-white u-color-black u-icon-arrow-right u-border-none"></button>
</li>
</ul>
</fieldset>
</form>

[Zinbar]

Sorry Matt, I think I need to use MailChimp to get some of these items. I was not familiar with it yet.

[Matt Zimmermann]

Hi Earl,

Try this:

<div class="t-newsletter-form c-collapsible-menu">
    <input id="t-newsletter-form" class="c-collapsible-menu__trigger" type="checkbox">
    <label class="c-collapsible-menu__label u-text-uppercase" for="t-newsletter-form">Join Our Newsletter</label>
    <h5 class="c-menu__title u-text-uppercase">Join Our Newsletter</h5>
    <fieldset>
        <legend>Join Our Newsletter</legend>
        <ul class="c-form-list">
            <li class="c-form-list__item c-control-group c-control-group--rounded u-flex">
                <input class="c-form-input c-control-group__field u-bg-white u-border-none t-newsletter-form__input" data-mailchimp-identifier="global-mailchimp-email" type="email" name="email" value="" placeholder="Enter your email">
                <button class="c-button c-control-group__button u-bg-white u-color-black u-icon-arrow-right u-border-none" onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' );"></button>
            </li>
        </ul>
    </fieldset>
</div>

[Zinbar]

Yes, that pushes the email address to MailChimp, thanks. But it leaves the email address in the form box after you click and nothing seems to happen as far as the end user is concerned. Can we clear that email or better yet pop up or send them them to a thank you page.

[Matt Zimmermann]

Hi Earl,

Looks like I left out the message DIV:

<div class="t-newsletter-form c-collapsible-menu">
    <input id="t-newsletter-form" class="c-collapsible-menu__trigger" type="checkbox">
    <label class="c-collapsible-menu__label u-text-uppercase" for="t-newsletter-form">Join Our Newsletter</label>
    <h5 class="c-menu__title u-text-uppercase">Join Our Newsletter</h5>
    <fieldset>
        <legend>Join Our Newsletter</legend>
        <ul class="c-form-list">
            <li class="c-form-list__item c-control-group c-control-group--rounded u-flex">
                <input class="c-form-input c-control-group__field u-bg-white u-border-none t-newsletter-form__input" data-mailchimp-identifier="global-mailchimp-email" type="email" name="email" value="" placeholder="Enter your email">
                <button class="c-button c-control-group__button u-bg-white u-color-black u-icon-arrow-right u-border-none" onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' );"></button>
            </li>
        </ul>
    </fieldset>
    <div data-mailchimp-identifier="global-mailchimp-message"></div>
</div>

[Zinbar]

Perfect!