Hi there,

I am currently helping out a company with an eCommerce site in Magento Community Edition, but I'm struggling with embedding a Mailchimp email subscribe form into a page.

When I click Subscribe, literally nothing happens. The form is definitely validating, because I'm seeing error messages pop up when I click Subscribe without entering any details, but as soon as I enter details into each field, I click Submit and nothing happens.

Mailchimp's FAQs suggest that this is because of a Javascript conflict with another form that is already in the footer of the website.

Any idea how I could edit Mailchimp's code to get this to work?

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="http://electrix.us5.list-manage.com/subscribe/post?u=7dc5e83bd444f57b03b94a389&amp;id=ca12571cc2" method="post" name="mc-embedded-subscribe-form" target="_blank">
<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 id="mce-EMAIL" class="required email" type="email" name="EMAIL" value="" /></div>
<div class="mc-field-group"><label for="mce-CNAME">Company Name <span class="asterisk">*</span> </label> <input id="mce-CNAME" class="required" type="text" name="CNAME" value="" /></div>
<div class="mc-field-group input-group"><strong>Preferred Language </strong>
<ul>
<li><input id="mce-group[257]-257-0" type="radio" name="group[257]" value="1" /><label for="mce-group[257]-257-0">English | UK</label></li>
<li><input id="mce-group[257]-257-1" type="radio" name="group[257]" value="2" /><label for="mce-group[257]-257-1">English | USA</label></li>
<li><input id="mce-group[257]-257-2" type="radio" name="group[257]" value="4" /><label for="mce-group[257]-257-2">Fran&ccedil;ais</label></li>
<li><input id="mce-group[257]-257-3" type="radio" name="group[257]" value="8" /><label for="mce-group[257]-257-3">Deutsch</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">&nbsp;</div>
<div><input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="Subscribe" /></div>
</form></div>
<script type="text/javascript">// <![CDATA[
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='CNAME';ftypes[3]='text';fnames[7]='NBUS';ftypes[7]='dropdown';fnames[4]='COUNTRY';ftypes[4]='dropdown';fnames[6]='CURRENCY';ftypes[6]='dropdown';fnames[5]='CID';ftypes[5]='text';fnames[8]='UBPAGEID';ftypes[8]='text';fnames[9]='UBVARIANT';ftypes[9]='text';fnames[10]='UBDATE';ftypes[10]='date';
try {
    var jqueryLoaded=jQuery;
    jqueryLoaded=true;
} catch(err) {
    var jqueryLoaded=false;
}
var head= document.getElementsByTagName('head')[0];
if (!jqueryLoaded) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
    head.appendChild(script);
    if (script.readyState && script.onload!==null){
        script.onreadystatechange= function () {
              if (this.readyState == 'complete') mce_preload_check();
        }    
    }
}

var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = '#mc_embed_signup input.mce_inline_error{border-color:#6B0505;} #mc_embed_signup div.mce_inline_error{margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff;}';
}
var head= document.getElementsByTagName('head')[0];
var style= document.createElement('style');
style.type= 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = err_style;
} else {
  style.appendChild(document.createTextNode(err_style));
}
head.appendChild(style);
setTimeout('mce_preload_check();', 250);

var mce_preload_checks = 0;
function mce_preload_check(){
    if (mce_preload_checks>40) return;
    mce_preload_checks++;
    try {
        var jqueryLoaded=jQuery;
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js';
    head.appendChild(script);
    try {
        var validatorLoaded=jQuery("#fake-form").validate({});
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    mce_init_form();
}
function mce_init_form(){
    jQuery(document).ready( function($) {
      var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
      var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
      $("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
      options = { url: 'http://electrix.us5.list-manage1.com/subscribe/post-json?u=7dc5e83b876503b94a389&id=ca12231cc2&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                    beforeSubmit: function(){
                        $('#mce_tmp_error_msg').remove();
                        $('.datefield','#mc_embed_signup').each(
                            function(){
                                var txt = 'filled';
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        var bday = false;
                                        if (fields.length == 2){
                                            bday = true;
                                            fields[2] = {'value':1970};//trick birthdays into having years
                                        }
                                        if ( fields[0].value=='MM' && fields[1].value=='DD' && (fields[2].value=='YYYY' || (bday && fields[2].value==1970) ) ){
                                            this.value = '';
                                        } else if ( fields[0].value=='' && fields[1].value=='' && (fields[2].value=='' || (bday && fields[2].value==1970) ) ){
                                            this.value = '';
                                        } else {
                                            if (/\[day\]/.test(fields[0].name)){
                                                this.value = fields[1].value+'/'+fields[0].value+'/'+fields[2].value;                                           
                                            } else {
                                                this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                            }
                                        }
                                    });
                            });
                        $('.phonefield-us','#mc_embed_signup').each(
                            function(){
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        if ( fields[0].value.length != 3 || fields[1].value.length!=3 || fields[2].value.length!=4 ){
                                            this.value = '';
                                        } else {
                                            this.value = 'filled';
                                        }
                                    });
                            });
                        return mce_validator.form();
                    }, 
                    success: mce_success_cb
                };
      $('#mc-embedded-subscribe-form').ajaxForm(options);


    });
}
function mce_success_cb(resp){
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        $('#mce-'+resp.result+'-response').show();
        $('#mce-'+resp.result+'-response').html(resp.msg);
        $('#mc-embedded-subscribe-form').each(function(){
            this.reset();
        });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                $('#mce-'+resp.result+'-response').show();
                $('#mce-'+resp.result+'-response').html(msg);            
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';

                var input_id = '#mc_embed_signup';
                var f = $(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = $(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = $(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = $().parent(input_id).get(0);
                }
                if (f){
                    $(f).append(html);
                    $(input_id).focus();
                } else {
                    $('#mce-'+resp.result+'-response').show();
                    $('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            $('#mce-'+resp.result+'-response').show();
            $('#mce-'+resp.result+'-response').html(msg);
        }
    }
}
// ]]></script>
<!--End mc_embed_signup-->

Any help would be great.

Thanks,

Richard

Anyone at all? Really need some help with this.

What's the result in your console everytime you click the submit button?

I've never used the console before (I'm not really a programmer, as you can probably tell), but in Chrome, this is what shows when I open up the Console, enter some values and click Subscribe:

9b4f15ef8becdd9c34bac26af12d13ca

To clarify, if you can't see the picture above, here is the text:

Uncaught TypeError: Cannot call method 'hide' of null newsletter:345
mce_success_cb newsletter:345
options.success jquery.form-n-validate.js:149
k 7314ca446903a63da6418d96503dabab.0.js:7
l.fireWith 7314ca446903a63da6418d96503dabab.0.js:7
y 7314ca446903a63da6418d96503dabab.0.js:7
c.onload.c.onreadystatechange 7314ca446903a63da6418d96503dabab.0.js:7

Any help at all with this would be great. Can't figure it out.

You have to check what causes this error "Uncaught TypeError: Cannot call method 'hide' of null newsletter:345" at line 345

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.