MailChimp into the Global Footer Newsletter Form

[lesliekirk]

I'm working on integrating the MailChimp newsletter signup form into the ReadyTheme Content Section Global Footer Newsletter Form. The email input field is easy but I'm struggling with the MailChimp input button and the ReadyTheme <button>

<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="text" name="Email_Address" placeholder="Email Address" />
    <input class="c-button c-control-group__button u-bg-white u-color-black u-icon-arrow-right u-border-none" type="button" title="Sign Up" value="Sign Up" onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' );" />

This will subscribe the email but oh boy does it look funny




This code looks great but doesn't work (subscribe). It reloads the page and appends my email address as part of the URL

<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="text" name="Email_Address" placeholder="Email Address" />
    <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>

I probably have just missed one little something but I'm not sure what.

[dcarver]

Change

onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' );"

to

onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' ); return false;"

.

[lesliekirk]

Thank you, David. That was perfect.

For archival purposes here is the code I inputted into the ReadyTheme > Content Section > newsletter_form

<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" data-mailchimp-identifier="global-mailchimp-email" type="text" name="Email_Address" placeholder="Email Address" />
    <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' ); return false;"></button>    

            </li>
        </ul>
        <div class="mailchimp_message" data-mailchimp-identifier="global-mailchimp-message"></div>
    </fieldset>
</form>

I left the <mvt:item name="readytheme" param="contentsection( 'newsletter_form' )" /> token in place (but did make sure everything related to MailChimp was set up).

[Matt Zimmermann]

The form element can be replaced with a div as it is not needed when using the MailChimp module.

[eldon99]

I just launched a redone site using shadows. It removed all the css and js files for Mailchimp. Is there a page I can pull the info the paste it back in, or should I just reinstall the Mailchimp module?

[Matt Zimmermann]

I don't believe we have a page referencing all the default JavaScript or CSS for this.

[eldon99]

I uninstalled the module and reinstalled. I then confirmed the css and js files were back in place and active. I then pasted the following code in to the form box:

<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--block 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-red u-icon-arrow-right u-border-none" onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' );"></button>
            </li>
        </ul>
    </fieldset>
</div>

But when I try to subscribe it does nothing.

Not sure what I am missing.

[Matt Zimmermann]

I believe the NAME value on your input is incorrect; 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--block 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_Address" value="" placeholder="Enter your email">
                <button class="c-button c-control-group__button u-bg-white u-color-red u-icon-arrow-right u-border-none" onclick="MailChimp_NewsLetter_Signup_Submit( 'global-mailchimp' ); return false;"></button>
            </li>
        </ul>
    </fieldset>
</div>

[eldon99]

No go until I added the following div:

<div class="mailchimp_message u-color-white" data-mailchimp-identifier="global-mailchimp-message">Sign up to receive coupons, discounts and product updates.</div>

Thank you for the assist.