Support » Plugin: MailChimp List Subscribe Form » Change CSS

Viewing 7 replies - 1 through 7 (of 7 total)
  • mc_dominic


    MailChimp Support Rep

    Hi Swolock,

    Thanks for hopping in the forum. If you’re trying to modify the styling of the form, it’s best to add extra styles to your site’s css files. This can be modified in the WordPress admin area by selecting Appearance > Editor. On the editor page select the current theme and modify the styles.css files. Adding the styles to your site’s css, rather than modifying the plugin will prevent updates to the plugin overwriting the css updates.

    At the bottom of the plugins settings page, there’s a CSS cheatsheet, it has tips on targeting specific elements in the plugin. For example, .mc_input will target all text fields.

    If these aren’t working, we can take a look at your site. Just send a link to the site, and the non-working styles.

    We look forward from hearing from you!


    I have similar problem. I added the code in the Stylesheet, which I found the the forum, but it only worked partially. Here is the code that I added.
    #mc_signup_form .widget_ns_mailchimp {width: 160px; }
    #mc_signup_form .mc_input {width: 160px; }
    #mc_signup_form .widget_mailchimpsf_widget {width: 120px; }
    #mc_signup_form .mc_form_inside {width: 180px; }
    #mc_signup_form .mc_var_label {
    display: inline;
    line-height: 1.5em;
    #mc_signup_form {
    width: 200px;
    #mc_signup input[type=”text”] {
    margin-bottom: 0;
    And this is the page that I’m trying to add the form,

    I’ll try your sugestion. Here is my site,

    Hey Rad22!

    Thanks for hopping into the forum.

    It’s important to note that we’ll primarily utilize the classes and indicators found in the CSS Cheat Sheet. To access it, open your site’s admin panel, click Settings and select MailChimp Setup. Scroll down to locate those underneath the yellow heading.

    We’ll also be able to make those declarations by providing values in either pixels or percentages. So, for example, if we wanted to change the width of all the form elements within the main container, we could use either of the following two rules:

    .mc_form_inside {max-width: 160px;}

    .mc_form_inside {max-width: 50%;}

    Let us know if you end up having any specific questions! We’ll be happy to help get them answered 🙂

    If I can butt in here… I found that putting the id then the class helped a bit.

    #mc_signup_form .mc_input { ... }

    Hey Elliot,

    I’m trying to embed the mailing list form into the body of my webpage. When I do it as a widget in the footer it looks small, however once I embed it into a body of my page it gets huge and I can’t control spacing between the fields. When I change the size of the form container the container size changes but the fields stay outside the container with the spacing between them unchanged. None of the suggested commends in the CSS Cheat Sheet seems to be effecting it.

    I just figured it out. I had a contact form on the same page above the mailing list form. Once I moved the contact form below the mailing list form the problem disappeared.
    Thanks for your help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change CSS’ is closed to new replies.