Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #22700

    Hello!

    When I click “Subscribe” on my Mailchimp opt-in (in a lightbox), the form is stagnant and does not reveal the “successfully subscribed/ confirm” message. http://dailyvitamoves – click on first “Get VitaMoves Every Week” in right sidebar

    I was told by Mailchimp support that there was probably some javascript in my theme that was preventing this from happening. Could this be true? If so, what can I do about it? Is it possible for it to appear in my lightbox?

    I appreciate your help.

    Angelo

    #116882

    Hi Angelo,

    Strange that they would say that. Its a very very common issue with wordpress and adding in your own javascript snippets. The mailchimp script needs to be enclosed in a no-conflict wrapper.

    Did you add in the javascript for the pop up to your header.php or was it done with a plugin? There are a number of solutions for this but all are addressed here in the wordpress codex: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

    Regards,

    Devin

    #116883

    Thank you, Devin for your reply.

    I looked through the resource you provided, but I can’t make too much sense of it. I’m not a coder, so I’ve been searching all day for laymen explanations on how to exactly enclose in a “no-conflict wrapper” and looking for other solutions.

    You mentioned that there are other solutions to this. I know how to access my php files and eit them. Is there something simple that I can do or do I need to hire a javascript person?

    Angelo

    #116884

    How is the mailchimp form added in? Is it with a plugin or did you add in some code to the header?

    #116885

    I pasted the code into the sidebar and “top portion” that Mailchimp recommended to post into header.

    #116886

    I meant in the <head> section of header.php

    #116887

    This is the code I put in header.php

    <link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:400px;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    </style>

    #116888

    HI,

    Well there is a whole conclave of errors on your page http://i.imgur.com/uAns145.png

    Some of the errors make me suspect that the jquerry code you added to the page is not correct.

    There should be something that looks like the code below surrounding the block of code..

    jQuery(document).ready(function ($) {

    }

    I see something like that in this sample mailchimp code .. http://wpbarista.com/wp-content/uploads/2011/10/newsletter.txt

    Have you double checked with Mail Chimp on their support forum as to whether you are installing their plugin correctly?

    Thanks,

    Nick

    #116889

    I’m not using a mailchimp plugin. I’m using a lightbox plugin that displays the form. I embedded the code below in a widget. I took the code from the mailchimp site that generates the code. I don’t notice any jquery/javascript code in the beginning like your example.

    <!-- Begin MailChimp Signup Form -->
    <link href="http://cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    </style>
    <div id="mc_embed_signup">
    <form action="http://dailyvitamoves.us4.list-manage.com/subscribe/post?u=81588f280f78f6324481f7323&id=14b41b56e4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <h2>Get VitMoves Every Week</h2>
    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
    <div class="mc-field-group">
    <label for="mce-FNAME">First Name <span class="asterisk">*</span>
    </label>
    <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    </div>
    <div class="mc-field-group">
    <label for="mce-LNAME">Last Name <span class="asterisk">*</span>
    </label>
    <input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
    </div>
    <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
    </label>
    <input type="email" value="" 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> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </form>
    </div>
    <script type="text/javascript">
    var fnames = new Array();var ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[0]='EMAIL';ftypes[0]='email';
    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 = '#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;
    }
    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://dailyvitamoves.us4.list-manage.com/subscribe/post-json?u=81588f280f78f6324481f7323&id=14b41b56e4&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 = 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;
    }
    }
    });
    });
    return mce_validator.form();
    },
    success: mce_success_cb
    };
    $('#mc-embedded-subscribe-form').ajaxForm(options);

    });
    }
    function mce_success_cb(resp){
    jQuery(document).ready( function($) {
    $('#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-->

    #116890

    Hi,

    I am sorry , I don’t understand. You said you are not using mailchimp but you took their code? Ok.

    What I can tell you is that there are errors coming from your code , and one of the places in fact is that block you posted above from the function mce_success_cb(resp) where you are using the $ shortcut within that function without a .ready( handler ) , which is breaking your code and preventing your form from submitting. There are a number of other errors as well.

    You have a popup lightbox with a form on it, the submit button doesn’t work (due to the errors on the page). I don’t know where you got this block of code you pasted into the page. Where did you read instructions to do that, at least show me a page so I can figure out what’s going on here. So lets start from what you are trying to do, and where you read about the plan of action you are currently following.

    *I edited the code you pasted above, try sticking it back in and see if it works.

    Thanks,

    Nick

    #116891

    My apologies for not being clear and thank you for editing the code. It didn’t solve my issue. At my site: http://dailyvitamoves.com I’d like to have an image that when clicked on opens a lightbox that has my Mailchimp form and then shows “success” message after clicking “Subscribe.”

    I’m using Mailchimp and trying to put their supplied form embed code into a lightbox. I’m using a lightbox plugin called Lightbox Plus Colorbox and they suggest to add code the following way where “Inline Content Goes Here” I placed the Mailchimp embed code:

    The following example shows how to setup content for display in a lightbox. You will need to create a link to the content that contains a class that has the same value as the Link Class for the inline lightbox you are using.

    Inline HTML Link Name

    You will also need to set up a div element to contain you content. The div element that contains the content must contains have and id with a value of the Content ID for the inline light box you are using. Finally if you want the content to be hidden until the visitor clicks the link, wrap the content div with another div and set the value for style to display:none or assign a class that has display:none for a property

    <div style=”display:none”>

    <div id=”lbp-inline-href-1″ style=”padding: 10px;background: #fff”>

    Inline Content Goes Here

    </div>

    </div>

    Is there more info. that you need? I really appreciate your help!

    Thank you very much!

    Angelo

    #116892

    Unfortunately this won’t work because prettyphoto won’t load the jquery script and can’t execute the js code. You can try to create a separate html file for the mailchimp form and then use the iframe feature (see prettyphoto demo page (external sites): http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ ) to display it.

    #116893

    Hey,

    (Read what Peter wrote above first)

    I did a trace on the message you quoted and its a 1 year old forum post( http://wordpress.org/support/topic/plugin-lightbox-plusinline ) by the developer of the plugin, but since that time there are quite a few other posts, including video tutorials http://philipgledhill.co.uk/lightbox-plus-video-guide/

    But first things first. Remove Jetpack. Also remove all plugins except mailchimp and that lightbox. ALL of them.

    Then you need to upgrade the theme. I can see you are not using the latest framework version and there were lots of changes. when you finish updating, and only have mailchimp and the lightbox on, let me know.

    Thanks,

    Nick

    #116894

    Thanks! Will do, Nick. By remove plugins, do you mean deactivate or delete?

    #116895

    Hi,

    Just deactivate them.

    Regards,

    Ismael

    #116896

    Ok. All plugins deactivated except lightbox plus colorbox and theme updated.

    Ready for next step. I appreciate your help!

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Mailchimp – No "successfully subscribed" message’ is closed to new replies.