Nacole Posted February 1 Share Posted February 1 CSS Beginner! I'm trying to customize my embedded Mailchimp form. I was able to change the primary background color to match the website but there is a white strip underneath each input field. Very grateful for any CSS recommendations to solve! Link to comment
Nacole Posted February 1 Author Share Posted February 1 The current code: <!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#f8f5f0; clear:left; font:14px Josefin Sans,sans-serif; width:400px;} </style> <div id="mc_embed_signup"> <form action="https://lolourbrbiztondo.us21.list-manage.com/subscribe/post?u=a408deb3377812cf0cdadbc4f&id=f91f120f0e&f_id=006fd0e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <div class="indicates-required"><span class="asterisk">*</span> indicates required</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" required> <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span> </div> <div class="mc-field-group"> <label for="mce-FNAME">First Name </label> <input type="text" value="" name="FNAME" class="" id="mce-FNAME"> <span id="mce-FNAME-HELPERTEXT" class="helper_text"></span> </div> <div class="mc-field-group input-group"> <p1>Services I Am Interested in... </p1> <ul><li> <input type="checkbox" value="1" name="group[234][1]" id="mce-group[234]-234-0"> <label for="mce-group[234]-234-0">Goddess Photography</label> </li> <li> <input type="checkbox" value="2" name="group[234][2]" id="mce-group[234]-234-1"> <label for="mce-group[234]-234-1">Divine Masculine Photography</label> </li> <li> <input type="checkbox" value="4" name="group[234][4]" id="mce-group[234]-234-2"> <label for="mce-group[234]-234-2">Bodywork</label> </li> <li> <input type="checkbox" value="8" name="group[234][8]" id="mce-group[234]-234-3"> <label for="mce-group[234]-234-3">Sound Healing</label> </li> <li> <input type="checkbox" value="16" name="group[234][16]" id="mce-group[234]-234-4"> <label for="mce-group[234]-234-4">Couples Work</label> </li> <li> <input type="checkbox" value="32" name="group[234][32]" id="mce-group[234]-234-5"> <label for="mce-group[234]-234-5">Coaching</label> </li> </ul> <span id="mce-group[234]-HELPERTEXT" class="helper_text"></span> </div> <div id="mce-responses" class="clear foot"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a408deb3377812cf0cdadbc4f_f91f120f0e" tabindex="-1" value=""></div> <div class="optionalParent"> <div class="clear foot"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </div> </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';fnames[6]='CHECKBOX';ftypes[6]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup--> Link to comment
tuanphan Posted February 3 Share Posted February 3 Can you share link to your site? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Nacole Posted February 3 Author Share Posted February 3 Oh yes... thank you @tuanphan for your help! puma-okra-r73p.squarespace.com Link to comment
tuanphan Posted February 8 Share Posted February 8 On 2/4/2023 at 1:28 AM, Nacole said: Oh yes... thank you @tuanphan for your help! puma-okra-r73p.squarespace.com Add this to Design > Custom CSS #mc_embed_signup .helper_text { background-color: Transparent !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment