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