WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
styling mailchimp for one line (16 posts)

  1. drvann
    Member
    Posted 2 years ago #

    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.

    http://wordpress.org/extend/plugins/mailchimp/

  2. mc_nate
    Member
    Posted 2 years ago #

    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:

    http://wordpress.org/support/topic/plugin-mailchimp-list-subscribe-form-request-add-placeholder-text-for-mailchimp-widget?replies=8

    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!

    Cheers

  3. quinselle
    Member
    Posted 2 years ago #

    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

  4. mc_nate
    Member
    Posted 2 years ago #

    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 {
    float:left;
    }

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

    Cheers

  5. quinselle
    Member
    Posted 2 years ago #

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

  6. mc_nate
    Member
    Posted 2 years ago #

    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 {
    width:200px;
    }

    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:

    http://cl.ly/0y290d3m0n1u1H2d3F0n

    Cheers!

  7. quinselle
    Member
    Posted 2 years ago #

    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?

  8. mc_nate
    Member
    Posted 2 years ago #

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

    Cheers

  9. quinselle
    Member
    Posted 2 years ago #

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

  10. jeeni
    Member
    Posted 2 years ago #

    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!

  11. jeeni
    Member
    Posted 2 years ago #

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

  12. mc_nate
    Member
    Posted 2 years ago #

    Hey there, Jeeni!

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

    http://wordpress.org/extend/plugins/mailchimp-widget/

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

    Cheers

  13. helgatheviking
    Member
    Posted 2 years ago #

    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)

  14. mc_nate
    Member
    Posted 2 years ago #

    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!

    Cheers

  15. paunya
    Member
    Posted 1 year ago #

    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:
    http://bernadettehartman.com/wp-content/MCEmbedFormHoriz.css

    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.

  16. paunya
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags