Centre Mailchimp for WP form

designdogs

See attached screen, I don't seem to be able to centre my form? Is it possible to have it centred? Or do I have to purchase premium Mailchimp for WP?

Thanks.

Daniel

Try to add this style to your form: http://nimb.ws/X3Shgy

With Regards
Daniel

designdogs

Thank you for the fast reply. It didn't work, maybe an error in my code. See screen shot, can you see anything wrong?

Thanks.

Daniel

Yes, you have a mistake: http://nimb.ws/ldDgVu
You have "centre" and it should be "center"

With Regards
Daniel

designdogs

Thank you. The word email address is now centred but not the rest. See 2 screen shots.

Thank you again for fast reply.

Air

Well link to this page would help a ton so we could see what HTML is there exactly, and could target it with custom CSS. In other case use Visual Composer options to center it.

With kind regards.

designdogs

I can provide log in. Site is not live. I have tried with VC.

Air

Send me access via private message- that is all I need to tackle such topic faster.

designdogs

PM sent thank you.

Daniel

Refresh the page now and let us know.

designdogs

You are a hero. Thank you very much

Could you please tell me how to edit CSS for this so I can do it on my Starter site? I need to centre my "sign up button" on Starter site.

Air

Everything you will find In form that you edited :-)

designdogs

Thanks. I have fixed it on Starter now

On website you just fixed for me is it possible to have a rounded pink button and slightly bigger please? Same as attached screen shot but pink instead of blue?

This pink:
#e5055d

I know this is a lot to ask but I'm almost finished.

Thank you.

Daniel

Right now on the Starter theme this option is enabled: http://nimb.ws/JMiaRb
that means that the mailchimp use the starter CSS styles so you can change the colors in the settings here: http://nimb.ws/naCAjd .

Like you see there is no option for size so you must do it using the Custom CSS, try this one:

input[type="submit"] {
    font-size: 14px;
    padding-left: 40px;
    padding-right: 40px;
    height: 46px;
    line-height: 48px;
    border-radius: 50px;
}

I made everything bigger but if you want you can change the font size, paddings and height but remember if you change the height you must also change the line-height eg.

    height: 56px;
    line-height: 58px;

P.S The same story you can implement in the Agency Theme, just enable the option from my first link in the mailchimp tab.

With Regards
Daniel

designdogs

This all worked thank you very much. One more question with it:

How do I add more padding above the button so there is space between the enter email field and button. I will need to do this on Starter as well.

Thank you very much again.

Air

If you plan on creating sites for clients then learning some CSS and use of firebug or similar tool will move your work faster :-)

For this particular form this custom CSS should help:

.mc4wp-form input[type="submit"] {
    margin-top: 20px;
}

With kind regards.

designdogs

Ah I was trying to add padding-top instead of margin.

Thanks for the advice.