Jump to content

Embedded Mailchimp CSS

Recommended Posts

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!

Screen Shot 2023-01-31 at 4.47.45 PM.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;}

<div id="mc_embed_signup">
    <form action="https://lolourbrbiztondo.us21.list-manage.com/subscribe/post?u=a408deb3377812cf0cdadbc4f&amp;id=f91f120f0e&amp;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>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
    <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
<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 class="mc-field-group input-group">
    <p1>Services I Am Interested in... </p1>
    <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>
    <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>
    <input type="checkbox" value="4" name="group[234][4]" id="mce-group[234]-234-2">
    <label for="mce-group[234]-234-2">Bodywork</label>
    <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>
    <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>
    <input type="checkbox" value="32" name="group[234][32]" id="mce-group[234]-234-5">
    <label for="mce-group[234]-234-5">Coaching</label>
    <span id="mce-group[234]-HELPERTEXT" class="helper_text"></span>
    <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">
<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
On 2/4/2023 at 1:28 AM, Nacole said:

Oh yes... thank you @tuanphan for your help!


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

Create an account or sign in to comment

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

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.