WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp Embed Not Showing Success Response (8 posts)

  1. _stephanie_
    Member
    Posted 3 years ago #

    This is making me crazy. I don't want to use a plugin for my newsletter sign-up form-- just the regular "embed" code MailChimp provides. I put it in the body in header.php.

    When the email address I enter is not valid I get a proper error message. However, when the email is valid, I get no success message. The confirmation email is sent, so the form is actually submitting properly. Here is the code (minus the account details, replaced with "private"):

    <!-- Begin MailChimp Signup Form -->
    
    <script type="text/javascript">
    // delete this script tag and use a "div.mce_inline_error{ XXX !important}" selector
    // or fill this in and it will be inlined when errors are generated
    var mc_custom_error_style = '';
    </script>
    <div id="mc_embed_signup">
    <form action="private" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
    	<fieldset>
    <div class="mc-field-group">
    <input type="text" value="enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" />
    </div>
    
    		<div>
    	             <input type="submit" value="submit" id="submit" name="subscribe" id="mc-embedded-subscribe" class="btn" /></div>
    		<div id="mce-responses">
    		<div class="response" id="mce-error-response" style="display:none"></div>
    		<div class="response" id="mce-success-response" style="display:none"></div>
    		</div>
    </fieldset>
    </form>
    </div>
    
    <script type="text/javascript">
    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]='MMERGE3';ftypes[3]='birthday';fnames[4]='MMERGE4';ftypes[4]='url';
    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 = 'http://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 script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js';
    head.appendChild(script);
    var err_style = '';
    try{
        err_style = mc_custom_error_style;
    } catch(e){
        err_style = '';
    }
    var head= document.getElementsByTagName('head')[0];
    var style= document.createElement('style');
    style.type= 'text/css';
    if (style.styleSheet) {
      style.styleSheet.cssText = '.mce_inline_error {' + err_style + '}';
    } else {
      style.appendChild(document.createTextNode('.mce_inline_error {' + 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;
        }
        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: 'private', 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(){
                                            if (fields.length == 2) fields[2] = {'value':1970};//trick birthdays into having years
                                        	if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                        		this.value = '';
    									    } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                        		this.value = '';
    									    } else {
    	                                        this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
    	                                    }
                                        });
                                });
                            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-->

    When I submit a correct email address, the error message I get is that #mce-success-response is null.

  2. mc_nate
    Member
    Posted 3 years ago #

    Hey Stephanie!

    Thanks for the feedback. Generally, when we see that error, it's because there's some sort of javascript conflict going on. What we'd suggest instead of using the in-line validation is to disable javascript on the embedded form. That will create a success popup in either instance. Check out this post for the screenshots on how to get that form set up correctly:

    http://wordpress.org/support/topic/plugin-mailchimp-list-subscribe-form-plugin-124-has-some-serious-bugs?replies=7

    Let us know if we can help with anything else!

    Cheers

  3. _stephanie_
    Member
    Posted 3 years ago #

    Hi, sorry it's taken me a while to get back to this. Those screenshots aren't available anymore. Could you repost them?

  4. mc_nate
    Member
    Posted 3 years ago #

    D'oh! My bad, Stephanie.

    Here's the screenshot for disabling javascript:

    http://screencast.com/t/Ln1HF2GV

    Give us a shout back if we can assist with anything else!

  5. fuzzyjared
    Member
    Posted 3 years ago #

    I am having the same issue. I actually think that this is a conflict with a recent wordpress update.

    I am testing the interactions of the form and it the console trace shows the following error.

    $ is not a function @ http://www.mysite.com/:225

    when inspecting this error it brings me to this line within the successful response.
    $('#mce-success-response').hide();

    I think this is due to errors withing jquery 1.6.1 which was recently upgraded in the WordPress auto update from jquery 1.5.

    Going back to jquery 1.5 by placing the following in your themes functions.php file should work.

    function my_init_method() {
    if (!is_admin()) {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
    }
    }

    add_action('init', 'my_init_method');

  6. tommyglue
    Member
    Posted 2 years ago #

    Thanks fuzzyjared! Was looking for a solution for this for ages!
    Recommend giving this solution a go to anyone who's having issues with mailchimp javascript conformations in wordpress.

  7. johnsamwallace
    Member
    Posted 2 years ago #

    This bug is starting to get old. Does anyone know if MailChimp is planning to update their evil popup code to compatibility with jQuery 1.6.1?

  8. johnsamwallace
    Member
    Posted 2 years ago #

    I would like to get the pop up to fade a couple of seconds after the success message appears.

    I tried using a callback function but I'm no expert at this:

    $('#mce-'+resp.result+'-response').html(resp.msg, function() { $('#mc_embed_signup').delay(2000).fadeOut(400); });

    No luck. Anyone see an obvious error?

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic