WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. jduve001
    Member
    Posted 1 year 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
    http://planetkratom.com

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

    Thanks.

    http://wordpress.org/plugin/mailchimp

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

  2. mc_nate
    Member
    Posted 1 year 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%;
    height:100px;}

    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.

    Cheers

  3. jduve001
    Member
    Posted 1 year 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.

    planetkratom.com

  4. mc_nate
    Member
    Posted 1 year 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%;
    height:30px;
    padding:5px;}

    http://cl.ly/image/0T1a1M0f1o0S

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

    Cheers

  5. kenzoishi
    Member
    Posted 7 months 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?

    thanks

  6. mc_tak
    Member
    Posted 7 months 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:
    http://wordpress.org/support/topic/plugin-mailchimp-list-subscribe-form-request-add-placeholder-text-for-mailchimp-widget?replies=21

    If you have any questions, let us know!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags