Support » Plugins and Hacks » styling mailchimp for one line

styling mailchimp for one line

  • Hey,

    I’m trying to get the Mailchimp widget to style on one line, imput area then button, but I can’t seem to get the css right. I have tried several styling codes I have seen on the forum with no success. Any ideas? Thanks!

    Site: danielrichards.biz, form is on the bottom right.


Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author mc_nate


    Hey there Dr. Vann!

    This one took a little extra brain-power. To borrow from another post on the same issue:

    …Because the “Email Address” label is kind of long, you might want to do away with that entirely or add it in the actual text box. While that’s not something we support directly, here’s the quick hack on how to add that:


    To kill the “Email Address” text, you’ll need to add this to your CSS:

    #mc_signup_form .mc_var_label {
    display: none;

    Then I ran into a little issue. It looks like there’s a minimum width set for input areas on your site. So you’ll have to add a little extra tidbit in there to make the width of the form smaller to allow for the button to show on the same line:

    #mc_signup_form .mc_input {
    float: left;
    min-width: 0px !important;
    width: 40%;

    You’ll end up with something like this:
    http://cl.ly/0k1Z2E0V473r0U3e3D0X (Screenshot)

    Again, you’ll probably want to do some fine-tuning, but this should get you headed in the right direction.

    If we can help with anything else, give us a shout!


    Hi! I’m actually trying to get the same thing to work (the email address field and submit button on the same line) but I’ve been trying it out and it still doesn’t work. I’d appreciate your help on that!

    Site: http://www.quinselle.com

    Plugin Author mc_nate


    Hey there, Quinselle!

    Looks like your site is currently in Maintenance Mode. However, generally, something like what we mentioned above should work. Depending on how wide the widget area is, you might be able to get away with just floating the email field to the left.

    #mc_mv_EMAIL.mc_input {

    That should give you something that looks similar to this:

    Screenshot — http://cl.ly/2S2f3O1F2e361X0J3t19

    I’ve also set my field label to be hidden, so that everything can fit onto one line. You can do that with the following CSS:

    #mc_signup_form .mc_var_label {
    display: none;

    Let us know if we can help with anything else! 🙂


    Hi! I hope you can take a look at my site again! I just deactivated the maintenance mode. Thank you!

    Plugin Author mc_nate


    Hey again!

    Aha! Okay… so it looks like we were on the right path before. However, because the widget area is somewhat condensed, we need to set the width of it to be a little wider. For testing, I set the width to 200px:

    #mc_signup {

    Then it looked like there was something blocking the submit button from filling in nicely. Turns out there was the overflow that did it. So I set “overflow: visible” and BAM! I got something like this:



    Thank you for your help! It seems like we’re on the right path. However, when I set “overflow: visible”, the layout of the site gets messed up. The main picture now overrides the navigations on the top, as well as the logo of the site. Is there any other way to go about doing this without messing up the site’s layout?

    Plugin Author mc_nate


    Hey again!

    It looks like the entire page’s overflow was set to “visible”, instead of just a MailChimp-specific class. It looks like you can set the page back to “hidden” and change just the “mc_merge_var” class to visible:

    .mc_merge_var {
    overflow: visible;

    That should take care of it. However, at this point, we have to be cautious about how much help we’re offering for site-specific CSS. We don’t want to wade too far into the deep end and mess up someone’s entire site. :\

    If we can help with anything else, give us a shout. 🙂


    Finally the whole site is working fine now! Thank you so much for your help, you’re amazing!

    I love that you’re active in the upkeep of your widget, Mailchimp! Your company rocks!

    In future versions of your plugin, would your team consider removing the hardcoded forced new-line styling of the <br /> from this file ns_widget_mailchimp.class.php and replace it with a surrounding div around the label and input areas? Example: <div class="whateverclass"> label, input </div> so people may style the form more easily?

    Thanks for the consideration!

    Also – while I’m mentioning that – because the input elements of the First Name and Last Name are on the same line as the label elements, there is no space between the label, the colon and the form field when the form is rendered, making it like this:

    First Name:|____________|
    Last name:|____________|
    Email Address: |____________|

    (Notice no space after the colons for the first 2 and a space after the last one.)

    I know it’s a minor detail, but it’s especially noticeable when they’re on the same line.

    I’m sure you have bigger fish to fry than tweaking that minor detail, but if you’re concerned about consistency, this would be something to find and fix.

    Thanks again so much Mailchimp! You know I love you! 🙂

    Plugin Author mc_nate


    Hey there, Jeeni!

    Judging by the “ns_widget_mailchimp” file, it sounds like you might be using the James Lafferty plugin, here:


    However, if we can assist with the other plugin — http://wordpress.org/extend/plugins/mailchimp/ — please don’t hesitate to let us know!


    mc_nate – it’d be nice if the plugin had a few more wrapper divs (or a definition list) so that we could easily reproduce a horizontal style (label: input on same line)

    Plugin Author mc_nate


    Hey Helga!

    Appreciate the feedback. While I can’t promise an ETA for something like that, I’ll definitely put this in front of the devs to see what we can do.

    In the meantime, if we can help with anything else, let us know!


    Err…if you need a custom style sheet for a horizontal layout you can play around with the one I created. I added a background image, changed some colors and embedded the mail signup into the php template file for the home page (just due to the way the template is set up, it was easier that way). I’m not exactly a rocket scientist with CSS or anything, but maybe this will help? Just replace the link to the stylesheet in the embed code with a link to your own style sheet. I used the mailchimp stylesheet as my base and just went in and changed whatever I needed to make it work with this particular layout for my client’s website.

    Here’s a link to the style sheet:

    Even though I am using the simple form, I kept all the other css markup in there in case I want to change it at some point and add the radio buttons or whatever (although this seems unlikely).

    If mucking around in CSS isn’t in your list of interests, then this is probably not helpful, but I think that creating your own stylesheet is probably the best way to get you what you’re wanting. Depending on how/where you are displaying a horizontal signup bar on your site you may have to add/change some of your main CSS styling, too. For instance, I had to force the submit button color because I had a global styling for submit buttons in my main CSS.

    p.s. – make sure to strip out the snippet of css and the comment in the embed code.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘styling mailchimp for one line’ is closed to new replies.