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

bamme

Senior Member
hi everyone

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

http://www.facebook.com/pages/Test/208987165782166

(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.

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: 'http://getronics.us2.list-manage2.com/subscribe/post-json?u=cd34269d14a20819edabac784&id=f45d94ec50&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(){                                    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>
 
Im assuming you have access to the css on that page?
If so add the following....

Code:
#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!
 
ah thanks that worked perfectly, now i see this code it should have been really straightforward to me - thanks very much Sunburn :)
 
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:

BEFORE ENTERING AN INVALID EMAIL AND CLICKING SUBSCRIBE:
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="text" style="z-index: 999;" id="mce-EMAIL" class="required email" name="EMAIL">
</div>
AFTER ENTERING AN INVALID EMAIL AND CLICKING SUBSCRIBE:
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="text" style="z-index: 999;" id="mce-EMAIL" class="required email mce_inline_error" name="EMAIL"><div htmlfor="mce-EMAIL" generated="true" class="mce_inline_error">Please enter a valid email address.</div>
</div>

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

Attachments

  • Picture 1.jpg
    Picture 1.jpg
    16.8 KB · Views: 2
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?
 
Try this.....

Code:
#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;}
 
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.
 
Back
Top