Okay
  Public Ticket #923603
mailchimp form styling
Closed

Comments

  •  2
    Robert started the conversation
    October 16, 2016 at 8:40pm

    Hi

    I'm adding a mailchimp form into a raw html panel on the front page of this site and would like the submit button to match the styling of the rest of the page (e.g. to match the 'buy a beer button' further down the page)

    Here's the html I'm using in the raw html panel:

    <h3 class="light" style="text-align: center;">SIGN UP FOR OUR FORTNIGHTLY NEWSLETTER</h3>

    <!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    #mc_embed_signup{background:#EA5455; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
      We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    </style>
    <div id="mc_embed_signup">
    <form action="//documentaryclub.us7.list-manage.com/subscribe/post?u=2015c9bdf00b348152f4ba985&id=58063bd789" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <!-- 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_2015c9bdf00b348152f4ba985_58063bd789" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>
    </div>

    <!--End mc_embed_signup-->

    Thanks a lot

    Rob

  •  8,839
    Tahir replied
    October 17, 2016 at 4:14pm

    Hey Robert,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #mc_embed_signup .button {
    background-color: #333333!important;
    color: #fff !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-family: Lovelo,sans-serif;
    letter-spacing: 2px;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    font-size: 12px !important;
    display: block;
}


    This might help write up further Custom CSS: https://support.woothemes.com/hc/en-us/articles/203105957-Customizing-your-theme-with-Firebug .


    Thanks

    ThemeNectar Support Team 

  •  3
    MatthewShelton7 replied
    September 4, 2021 at 12:11am

    Hey Tahir,

    This was the closest thread I could find to my issue. I've copied and pasted the HTML for an embedded form from Mailchimp into a raw HTML content block on my web page. But the button text-align is off, cutting off half of the word "download". Screenshot attached. No matter which settings I adjust, the text alignment doesn't change. I've also attempted to use the CSS below and tweak that way to no avail. 

    Here is the URL as well:  https://li.marketing/free-resume-template-google-docs/

  •  8,839
    Tahir replied
    September 4, 2021 at 9:58am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    body[data-form-submit="regular"] .container-wrap input[type=submit]#mc-embedded-subscribe {
    padding: 0 18px !important;
}

    Thanks

    ThemeNectar Support Team 

  • joeldavidk replied
    February 22, 2023 at 8:57am

    Hey there,


    I am trying to embed the Mailchimp script into the site, so Mailchimp finds it/is integrated. Have tried adding the script to the Custom JS Code (Head) section, but it is not recognized. Would be grateful for help here.

  •  2,958
    Andrew replied
    February 22, 2023 at 9:08am

    Hi again,

    Thanks for choosing Salient.

    There are also plugins available to make the process easier:
     https://wordpress.org/plugins/mailchimp-for-wp/ .

     Thanks