Can't connect my Mailchimp list to my Landing Page

Question

I've really been having a lot of trouble here... I have an HTML landing page and within the page there are a few forms. One of these forms collects user emails. I want to send these emails to my Mailchimp list but I am having the hardest time.

I created a form through mailchimp and embedded it on my page. I made a few minor style modifications but left in place the info mailchimp said I needed.

My problem is that every time I submit an email address through the form, my list on mailchimp does not get updated. Meaning, I do not think anything is "getting through" here on my HTML landing page end. Did I do something wrong?

Here's my form code:

<div id="mc_embed_signup">
    <form action="http://inspireconversation.us7.list-manage.com/subscribe/post?u=ee86d645c5e94d2c51a62c797&amp;id=07c5091ff0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc-email-field">
            <input type="email" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL">
        </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_ee86d645c5e94d2c51a62c797_07c5091ff0" value="">
        </div>
        <div class="clear">
            <input type="submit" value="Send" name="subscribe" id="mc-embedded-subscribe" class="send">
        </div>
    </form>
</div>

I added this to the stylesheet:

#mc-email-field { text-align: center; width: 80%; margin: 0 auto; }
#mc_embed_signup { font: 14px Helvetica, Arial, sans-serif; width: 509px;}

here's the URL for the landing page: http://contest.realfamilytrips.com (this contest is not yet active, thank you :)

Another problem is I can't seem to get the field input area to reach 509px but this is a minor issue at the moment. My main concern is connecting this form to my mailchimp list.

Thanks everyone for your help. Much appreciated.

Answer 1

I've examined the linked landing page and it looks like you are preventing the mailchimp form from submitting with this code in functions.js:

$(document).on('submit', 'form', function (e) {
    // Check email address
    // if email address ok
        $('.step-2').hide();
        $('.step-3').fadeIn(800);
        e.preventDefault();
    // else 
        // alert
        // e.preventDefault();
    // end if
});

The e.preventDefault() call means you are handling the event. Yet, you are not submitting the form. So, the form isn't submitted to mailchimp.

I can see what you are trying to do here, which is subscribe someone without the normal mailchimp flow (click subscribe, redirect to thank you page, etc). This answer shows how to do it. After your e.preventDefault() call, you would invoke an ajax call like that answer does in its 'register' function. I don't know if this is officially supported by mailchimp, but I just tested it and it does work.

I think the supported route is typically to use the mailchimp API from your server-side code. The API must be called server-side because it uses your mailchimp api key, which you'd want to keep private.