MailChimp Form Submit

mailChimpForm.html

<!-- 
This is a simple form to submit email and supporting fields to MailChimp.
Requirement: Client must create a "custom" form on mailchimp with these field names before it will accept the form submission...
API Integration is more flexible.
 -->
<div class="mailChimpSignup">
        <form data-user="{{ signupUser }}" data-id="{{ signupListId }}">
            <div class="logo">
                <img src="logo.jpg" alt="">
            </div>
            <h2 class="signupTitle">{{ signupTitle|default("Notification Signup") }}</h2>
            <p class="note fontBody">{{ signupText|default("We'll let you know when it's ready!") }}</p>

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

            <div class="form-group">
                <input type="text" value="" name="ZIP" class="required email form-control smallLabel fontPrimary registerZip" id="mce-ZIP" maxlength="10" placeholder="Postal Code" data-ip="{{ environment.ip }}">
            </div>

            <div class="form-group">
                <select name="STATUS" class="required form-control smallLabel fontPrimary" id="mce-STATUS">
                    <option value="">Status</option>
                    <option value="Single">Single</option>
                    <option value="Taken (matchmaker)">Taken (matchmaker)</option>
                </select>
            </div>

            <h4>Optional (and Helpful!)</h4>

            <div class="form-group">
                <select name="GENDER" class="form-control smallLabel fontPrimary" id="mce-GENDER">
                    <option value="">Gender</option>
                    <option value="Female">Female</option>
                    <option value="Male">Male</option>
                    <option value="Unlisted">Unlisted</option>

                </select>
            </div>
            <div class="form-group">
                <select name="AGE" class="form-control smallLabel fontPrimary" id="mce-AGE">
                    <option value="">Age Group</option>
                    <option value="High School">High School</option>
                    <option value="College">College</option>
                    <option value="Under 30">Under 30</option>
                    <option value="30-39">30-39</option>
                    <option value="40-49">40-49</option>
                    <option value="50-59">50-59</option>
                    <option value="60+">60+</option>
                </select>
            </div>

            <div class="signupAction">
                <button type="submit" class="submit btn fontPrimary bold btn positionAnchor" data-enabled="enabled">
                    <span class="btnGradient"></span>
                    <span class="btnText" data-trackCategory="CTA" data-trackLabel="signup" data-trackValue="{{ signupId }}">Sign Up</span>
                </button>
            </div>

            <p class="disclaimer">By submitting this form, you are granting: Launch Social Inc., 1330 N Broadway, Ste 200H, Walnut Creek, California, 94596, United States, permission to email you. You may unsubscribe via the link found at the bottom of every email.</p>
        </form>

        <div id="{{ signupId }}success_message" class="success_message hide">
            <h2 class="success_message_thanks">Thanks</h2>
            <div class="success_message_details note fontSecondary">You rock! We'll let you know when the Kickstarter campaign is live.<br><br>Check your email to confirm and complete signup.</div>
            <div class="success_message_sharing">
                {{ block('shareButtons') }}
            </div>
        </div>
    </div>

mailChimpSubmit.js

// Use Require.js or Contextual Scope
(function (root, factory) {
    if (typeof require === 'function') {
        require(['stratus', 'jquery'], factory);
    } else {
        factory(root.Stratus, root.$,);
    }
}(this, function (Stratus, $, _) {

    Stratus.DOM.ready(function () {
      
        // Get IP and Zip
        var ip = $('.registerZip').first().data('ip');
        if (ip.length > 0) {
            $.getJSON('https://ipapi.co/' + ip + '/json', function (data) {
                if (!data) return false;
                if (data.postal) {
                    $.each($('.registerZip'), function (i, el) {
                        $(el).val(data.postal);
                        $(el).parent().hide();
                    });
                } else {
                    $.each($('.registerZip'), function (i, el) {
                        $(el).set('value', '0');
                    });
                }
            });
        }


        /**
         * MailChimp Submission
         */
        var formClass = 'mailChimpSignup';

        // Support Multiple Forms inside an element of this class name
        var forms = $('.'+formClass+' form');
        if ( forms.length > 0 ) {
            $.each(forms, function(i, el) {
                $(el).submit(function (event) {
                    if (event) event.preventDefault();
                    // validate_input() is a validation function I wrote, you'll have to substitute this with your own.
                    if (validate_input($(el))) {
                        register($(el));
                    }
                });
            });
        }

        function register($form) {
            $.ajax({
                type: 'get',
                url: '//launchapp.us14.list-manage.com/subscribe/post-json?u='+$form.data('user')+'&id='+$form.data('id')+'&c=?',
                data: $form.serialize(),
                cache: false,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                error: function(err) {
                    $form.prepend('<div class="form-error">Oops, there was a problem connecting ;( <br>Email us at <a href="mailto:[email protected]">[email protected]</a> and we will add you manually.</div>');
                    ga('send', 'event', 'error', 'form', $form.find('input[name="EMAIL"]').val());
                },
                success: function(data) {
                    if (data.result != "success") {
                        $form.prepend('<div class="form-error">Oops, there was a problem ;( <br>'+data.msg+'<br>Email us at <a href="mailto:[email protected]">[email protected]</a> for more help.</div>');
                        ga('send', 'event', 'error', 'form', $form.find('input[name="EMAIL"]').val());
                    } else {
                        $form.hide();
                        $.each($form.parent().find('.success_message'), function (i, el) {
                            $(el).removeClass('hide');
                        });
                    }
                }
            });
        }

        function validate_email(email) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }

        function validate_input($form) {
            var inputs = $form.find('.form-control');
            // remove all errors
            var errors = $form.find('.form-error');
            errors.remove();
            var results = true;
            $.each(inputs, function(i, el) {
                $(el).removeClass('is-error');
                if($(el).hasClass('required')) {
                    var elError = null;
                    if(!$(el).val()) {
                        elError = 'Please provide a valid value.';
                    }
                    if($(el).attr('name')=='EMAIL') {
                        var emailValid = validate_email($(el).val());
                        if(!emailValid) {
                            elError = 'Please provide a valid email address.';
                        }
                    }
                    if(elError) {
                        results = false;
                        $(el).addClass('is-error');
                        $(el).before('<div class="form-error">'+elError+'</div>');
                    }
                }
            });
            return results;
        }

    });
}));