MailChimp List Subscribe Form
Decrease spacing between Title and Email? (6 posts)

  1. jduve001
    Posted 3 years ago #

    I can't tell if it is my site doing this or if it's css setting in the plugin.

    I'd like to decrease the spacing (margin) between the Title and Email Address verbiage. As you can see the spacing is too much and does not sit inline with the rest of the items to the right. It just looks off to me.

    At the bottom

    Is it possible to move the email section up a bit?
    How about resizing the "subscribe" button? Can I make it smaller?




  2. mc_nate
    Plugin Author

    Posted 3 years ago #

    Hey there!

    Both of those things should be possible through your site's CSS. Generally, to move up the email label and input area, you'd want to target the entire merge area and set some specific margins for it. Something like this should do the trick nicely:

    .mc_merge_var {
    margin-top: -10px;}

    I just pulled -10px out of thin air, so you'll definitely want to play with things a bit. As far as adjusting the subscribe button, the same idea, applies. You'll want to target that specific class in your CSS and add it to your site's Style.css file. You could set the constraints through "width" and "height" styling, like this:

    #mc_signup_submit.button {
    width: 50%;

    Again, those values are completely made up, so a little trial and error will be in order!

    Let us know if we can assist in any other way.


  3. jduve001
    Posted 3 years ago #

    Thank you Nate! That CSS worked for me.

    Now I am having the issue where the "Subscribe" text is not centering within the re-sized button. Any help with that.

    Please excuse the newb css questions. Still learning.


  4. mc_nate
    Plugin Author

    Posted 3 years ago #

    No worries!

    Although this isn't specific to MailChimp's form, you should be able to adjust the padding for that button in the same way that you adjusted the width/height. Something like this should do the trick:

    #mc_signup_submit.button {
    width: 60%;


    Although, feel free to adjust the padding to your heart's content to give you that proper look/feel. :)


  5. kenzoishi
    Posted 2 years ago #

    i've resized the subscribe button but how do i now resize the text box where people can input their email.

    and inside that text box, how can i have it say "email address" instead of having it outside the text box?


  6. mc_tak
    Posted 2 years ago #

    Hey Kenzoishi,

    It looks like there's two questions here. For the first, it sounds like you're looking to change the size of your form's input fields. To do this, you'll need to make some additional adjustments to your CSS code. This should do just that:

    .mc_merge_var input {
    width: 50px;

    To have 'email address' display inside of the box and remove it from the outside, you'll need to do two things: #1 hide it from the outside, and #2 add it as a placeholder element so it shows in side the input field.

    For #1, this bit of code targets and hides the label elements to do that:

    .mc_merge_var label {
    display: none;

    For #2, you can reference the discussion here, which will talk about how to implement that:

    If you have any questions, let us know!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • MailChimp List Subscribe Form
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic