WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
Change CSS (8 posts)

  1. swolock
    Member
    Posted 1 month ago #

    I'd like to modify the CSS in the form, but it looks like it's loaded in the body of the html as in <style>...</style>. Any way to get at it so I can change some things, specially the massive space under the text fields? Thanks

    https://wordpress.org/plugins/mailchimp/

  2. mc_dominic
    MailChimp Support Rep
    Posted 1 month ago #

    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!

    -mc_d

  3. Rad22
    Member
    Posted 1 month ago #

    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, http://ipaexperiments.com/wordpress/contact/
    Thanks.

  4. Rad22
    Member
    Posted 1 month ago #

    I'll try your sugestion. Here is my site, http://ipaexperiments.com/wordpress/contact/

  5. mc_elliot
    Member
    Posted 1 month ago #

    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 :)
    -Elliot

  6. swolock
    Member
    Posted 1 month ago #

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

    #mc_signup_form .mc_input { ... }

  7. Rad22
    Member
    Posted 1 month ago #

    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.
    Thanks,
    -Rad

  8. Rad22
    Member
    Posted 1 month ago #

    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.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags