Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

This Mailchimp form - getting round the javascript with css perhaps..

Discussion in 'Website Design Forum:' started by bamme, Mar 25, 2011.

  1. bamme

    bamme Senior Member

    hi everyone

    im implementing an embedded mailchimp subscribe form, on this facebook page:

    (this is my first facebook page using iframes.. it is not finished yet.. sorry if its sucky elsewhere and the code is badbut for now the only thing i want to focus on is described below..)

    The form is at the bottom of the facebook page, under "Stay updated", in the grey footer area.

    If you test it out by putting in an invalid email, you’ll see where an error message gets added – it appears in the code right slap inbetween the email field and the submit button which as you can see, doesnt look good.

    I am told by MailChimp that they couldn’t provide an indication as to how id change where the javascript puts this message within the signup form’s code or if this was possible without breaking the form's functions.

    So I was wondering if anyone could help me with how to apply css so that this little error message sits *under* the subscribe button and email field (and so that the subscribe button doesn’t jump about when it appears), or whether someone could help me change the javascript where necessary in order for me to have it place the message where I want it to be - *after* the subscribe button and email field..

    To note: the styles for this little error message are added thru javascript (err_style - ive tried to highlight it below) indicated below - its referenced as "mce_tmp_error_msg" in the outputted code.

    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';var err_style = '';try{    err_style = mc_custom_error_style; } catch(e){    err_style = 'font-family: Arial,Helvetica,sans-serif; font-size: 12px;color:#D12F19;'; //THIS IS WHERE THE LITTLE ERROR MESSAGE IS STYLED}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);$(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);  options = { url: '', 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[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>
  2. Sunburn

    Sunburn Active Member

    Im assuming you have access to the css on that page?
    If so add the following....

    #footer {   position:relative;}.mce_inline_error {   padding: 30px 0 0 228px;       position: absolute;       top: 91px;}
    I havn't tested the above code, so your mileage will vary!
  3. bamme

    bamme Senior Member

    ah thanks that worked perfectly, now i see this code it should have been really straightforward to me - thanks very much Sunburn :)
  4. Sunburn

    Sunburn Active Member

    your welcome :)
  5. bamme

    bamme Senior Member

    oh - i notice now that the error that appears when i put in an invalid email jumps about rather than the message dealt with above.

    this error message is added with javascript; and mailchimp tells me i cant change the place this appears.

    ive attached a screenshot (this will only appear if you test it and put in an invalid email without an @ and proper domain extension) and also the code is below, ive indicated the error message part, thats added thru javascript when the user presses subscribe:

    I wondered what I'd do to stop this happening taking into account the new styles implemented from advice above?

    Attached Files:

  6. Sunburn

    Sunburn Active Member

    The positioning of the elements are causing the problems, the inline message is being injected into the same container as the input box, but not the submit button.

    Do you have any control over the html code for that page?
  7. Sunburn

    Sunburn Active Member

    Try this.....

    #75 style.css#footer form input {    position:absolute;    left:163px;}LINE #184 style.cssinput#mc-embedded-subscribe.btn {    position:absolute;    left:310px;}.mce_inline_error {    left:-64px;}
  8. bamme

    bamme Senior Member

    thankyou i will give that a try!
  9. bamme

    bamme Senior Member

    Ok i tried this, unfortunately the form still jumps about - i try to adjust .mce_inline_error's positioning and styles in firebug and it seems to also enclose the email input field and position that too. the styles applied to .mce_inline_error now are:

    color: #D12F19; font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    padding: 30px 0 0 228px; <-- i tried removing this and things looked a bit better

    position: absolute;
    top: 91px;
    left: -64px; <-- i removed this and it also looked better, but adjusted it and the email input field moved too.
  10. Sunburn

    Sunburn Active Member

    just checked it out, looks all ok to me . you got it working now?

Share This Page