Jump to content
Sign in to follow this  
jrsrodawa

Inserting Mail Chimp Form into Blog

Recommended Posts

jrsrodawa

I am attempting to insert code for an email subscribe form created by mailchimp, onto a White House Pro page. The form fields appear but the styling elements disappear. Is there a way to avoid this?

Share this post


Link to post
Share on other sites
cmunns

Are there settings that control this when you choose your embed code from Mailchimp? Also, it helps if you shoot us a live link so I can see if there are overriding styles

Share this post


Link to post
Share on other sites
jrsrodawa

Dear Adam, Yes i have customized the look within mailchimp. Within the posting preview within WordPress displays things correctly, but the final result lacks some of the elements. The link to the page is... http://www.gembrooke.com/?page_id=260 the code is below... <!-- Begin MailChimp Signup Form --> <!--[if IE]> <style type="text/css" media="screen"> #mc_embed_signup fieldset {position: relative;} #mc_embed_signup legend {position: absolute; top: -1em; left: .2em;} </style> <![endif]--> <!--[if IE 7]> <style type="text/css" media="screen"> .mc-field-group {overflow:visible;} </style> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script> <script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script> <div id="mc_embed_signup"> <form action="http://gembrooke.us1.list-manage.com/subscribe/post?u=a3fb2f4ca688bf1ee6035ca04&id=b2e12f57b8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial;font-size: 12px;"> <fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #EEEEEE;color: #333333;"> <legend style="text-transform: capitalize;font-weight: bold;color: #ffffff;background: #d2691e;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;">Sign Up</legend> <div class="indicate-required" style="text-align: right;font-style: italic;overflow: hidden;color: #333333;margin: 0 9% 0 0;">* indicates required</div> <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"> <label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address <strong class="note-required">* </label> <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;"> </div> <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"> <label for="mce-FNAME" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">First Name <strong class="note-required">* </label> <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;"> </div> <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"> <label for="mce-LNAME" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Last Name <strong class="note-required">* </label> <input type="text" value="" name="LNAME" class="required" id="mce-LNAME" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;"> </div> <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"> <label for="mce-BUSNAME" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Company Name <strong class="note-required">* </label> <input type="text" value="" name="BUSNAME" class="required" id="mce-BUSNAME" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;"> </div> <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"> <label for="mce-BUSTYPE" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Business Type <strong class="note-required">* </label> <select name="BUSTYPE" class="required" id="mce-BUSTYPE" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;"> <option value="Retail Chain">Retail Chain</option> <option value="Independant Retailer">Independant Retailer</option> <option value="Wholesale">Wholesale</option> <option value="E-Commerce Only">E-Commerce Only</option> <option value="Vendor">Vendor</option> </select> </div> <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"> <label class="input-group-label" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">The Following Apply To Me </label> <div class="input-group" style="padding: .7em .7em .7em 0;font-size: .9em;margin: 0 0 1em 0;"> <ul style="margin: 0;padding: 0;"><li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="checkbox" value="1" name="group[1]" id="mce-group-1-0" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-group-1-0" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">AGS</label> <li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="checkbox" value="2" name="group[2]" id="mce-group-1-1" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-group-1-1" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">IJO</label> <li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="checkbox" value="4" name="group[4]" id="mce-group-1-2" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-group-1-2" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">RJO</label> <li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="checkbox" value="8" name="group[8]" id="mce-group-1-3" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-group-1-3" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">Continental Buying Group</label> <li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="checkbox" value="16" name="group[16]" id="mce-group-1-4" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-group-1-4" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">Gembrooke Vendor</label> <li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="checkbox" value="32" name="group[32]" id="mce-group-1-5" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-group-1-5" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">Other</label> </div> </div> <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"> <label class="input-group-label" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Format </label> <div class="input-group" style="padding: .7em .7em .7em 0;font-size: .9em;margin: 0 0 1em 0;"> <ul style="margin: 0;padding: 0;"><li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-0" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">html</label> <li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-1" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">text</label> <li style="list-style: none;overflow: hidden;padding: .2em 0;clear: left;display: block;margin: 0;"><input type="radio" value="mobile" name="EMAILTYPE" id="mce-EMAILTYPE-2" style="margin-right: 2%;padding: .2em .3em;width: auto;float: left;z-index: 999;"><label for="mce-EMAILTYPE-2" style="display: block;margin: .4em 0 0 0;line-height: 1em;font-weight: bold;width: auto;float: left;text-align: left;">mobile</label> </div> </div> <div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;"> <div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #FFEEEE;color: #FF0000;"></div> <div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #;color: #529214;"></div> </div> <div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div> </fieldset> Close </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[4]='BUSNAME';ftypes[4]='text';fnames[3]='BUSADDRESS';ftypes[3]='address';fnames[5]='BUSTYPE';ftypes[5]='dropdown';fnames[6]='ANNSALES';ftypes[6]='dropdown';fnames[7]='BUSWEB';ftypes[7]='url';fnames[8]='BUSPHONE';ftypes[8]='phone';fnames[9]='MOBILE';ftypes[9]='phone';fnames[10]='FAXNMBR';ftypes[10]='phone';var err_style = ''; try{ err_style = mc_custom_error_style; } catch(e){ err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: rgb(255, 238, 238) none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 0, 0);'; } var mce_jQuery = jQuery.noConflict(); mce_jQuery(document).ready( function($) { var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} }; var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options); options = { url: 'http://gembrooke.us1.list-manage.com/subscribe/post-json?u=a3fb2f4ca688bf1ee6035ca04&id=b2e12f57b8&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8", beforeSubmit: function(){ mce_jQuery('#mce_tmp_error_msg').remove(); mce_jQuery('.datefield','#mc_embed_signup').each( function(){ var txt = 'filled'; var fields = new Array(); var i = 0; mce_jQuery(':text', this).each( function(){ fields = this; i++; }); mce_jQuery(':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 }; mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options); }); function mce_success_cb(resp){ mce_jQuery('#mce-success-response').hide(); mce_jQuery('#mce-error-response').hide(); if (resp.result=="success"){ mce_jQuery('#mce-'+resp.result+'-response').show(); mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg); mce_jQuery('#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_jQuery('#mce-'+resp.result+'-response').show(); mce_jQuery('#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 = mce_jQuery(input_id); if (ftypes[index]=='address'){ input_id = '#mce-'+fnames[index]+'-addr1'; f = mce_jQuery(input_id).parent().parent().get(0); } else if (ftypes[index]=='date'){ input_id = '#mce-'+fnames[index]+'-month'; f = mce_jQuery(input_id).parent().parent().get(0); } else { input_id = '#mce-'+fnames[index]; f = mce_jQuery().parent(input_id).get(0); } if (f){ mce_jQuery(f).append(html); mce_jQuery(input_id).focus(); } else { mce_jQuery('#mce-'+resp.result+'-response').show(); mce_jQuery('#mce-'+resp.result+'-response').html(msg); } } } catch(e){ mce_jQuery('#mce-'+resp.result+'-response').show(); mce_jQuery('#mce-'+resp.result+'-response').html(msg); } } } </script> <!--End mc_embed_signup-->

Share this post


Link to post
Share on other sites
cmunns

It looks good so far, but I don't know what it's supposed to look like. Can you give me a screenshot of the desired look. Sorry to go back and forth I just need to be clear so I can help :)

Share this post


Link to post
Share on other sites
jrsrodawa
KbUZv.png The image of the basic design is above. I am missing the orange highlight at the border. Also the line spacing is somewhat different. Thanks, Joe

Share this post


Link to post
Share on other sites
cmunns

The inline styling is working fine, but the code you embedded isn't the same as the preview you posted. There is no reference in that code to the orange button. Can you try re-embedding?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×