How Do I Center the Subscribe Button?

Hey Patrick,

Thanks for getting in touch and sending us that screenshot. Normally the default plugin setup results in the button being centered beneath the form fields, so in this case it appears something in the site’s local CSS may be overriding the necessary properties. We’d be happy to take a look at the site itself for you and see what CSS can be changed to get that button in the center. If you can provide a link to the site here, or if you prefer you can email a link to it to wordpress [at] mailchimp [dot] com and notify us here that you’ve done so. We’ll happily take a look then reply here with what we find.

Thanks,
Gabe

Sent you an email!

Off topic: mc_gabe looking at your profile email address (which no one else can see) you are are MailChimp support rep? If so (I’m 99.44% sure that’s the case) then I can make your “Member” into “MailChip Support Member”.

Hi Jan! That’d be great if you can. I am a MailChimp Support Rep, as is mc_dominic.

Patrick, thanks for that follow up email. I missed it at first!

To fix that form’s button, you should be able to find the line in your stylesheet.css that looks like this:
#mc_signup_form .mc_signup_submit{text-align: left;}
If you replace that with #mc_signup_form .mc_signup_submit{text-align: center;} (changing text-align from left to center), that should do the trick!

Let me know if you have any trouble!
Thanks,
Gabe

There was no text align left. This is what was in the stylesheet:

.rd-button,.form-submit #submit,.pricing-table .signup,#mc_signup_submit{box-shadow:0 1px 1px rgba(0, 0, 0, 0.196);color:#FFFFFF;display:inline-block;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.196);-webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.196);-webkit-border-radius:2px;-moz-border-radius:2px;}
.rd-button:hover,.pricing-table .signup:hover,#searchsubmit:hover,#mc_signup_submit:hover{background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0) 100%)!important;}
.rd-button.dark-text{color:rgba(59, 59, 59, 0.85);text-shadow:0 1px 0 rgba(255, 255, 255, 0.6);}
.rd-button.dark-text.rd-button:hover{color:rgba(59, 59, 59, 0.85)!important;}

Hi Patrick,

Thanks for writing back. Looking at your site’s code, there are a few stylesheet files loaded. The code you posted above is from the style.css file. There’s another stylesheet that loads after that named stylesheet.css. In this file, the #mc_signup_submit id has the text-align: left; style. If you change it to text-align:center; in the stylesheet.css file the button should center.

Let us know if you have any other questions.

-mc_d

Fixed! Thanks.

Forgot to mark as resolved. RESOLVED!

I’m having this same issue. I got this code directly from mailchimp.
The form worked once. When I updated it to center it. It stopped redirecting me to a page in a new window stating to check my email….. Also, I notice there’s an aws download link towards the end. I’ve been at this for 3 hours. ??

Here’s my code:
<!– Begin MailChimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/classic-081711.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id=”mc_embed_signup”>
<form action=”//thebusywoman.us3.list-manage.com/subscribe/post?u=0b7655c4b7a6128004f81c8c1&id=709b9a2e3a” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<div id=”mc_embed_signup_scroll”>
<h2>Subscribe to The Busy Woman New to claim your FREE Goal Planning for The Busy Woman</h2>
<div class=”indicates-required”><span class=”asterisk”>*</span> indicates required</div>
<div class=”mc-field-group”>
<label for=”mce-EMAIL”>Email Address <span class=”asterisk”>*</span>
</label>
<input type=”email” value=”” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
</div>
<div class=”mc-field-group”>
<label for=”mce-FNAME”>First Name </label>
<input type=”text” value=”” name=”FNAME” class=”” id=”mce-FNAME”>
</div>
<div class=”mc-field-group”>
<label for=”mce-LNAME”>Last Name </label>
<input type=”text” value=”” name=”LNAME” class=”” id=”mce-LNAME”>
</div>
<p>Powered by MailChimp</p>
<div id=”mce-responses” class=”clear”>
<div class=”response” id=”mce-error-response” style=”display:none”></div>
<div class=”response” id=”mce-success-response” style=”display:none”></div>
</div> <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;”><input type=”text” name=”b_0b7655c4b7a6128004f81c8c1_709b9a2e3a” tabindex=”-1″ value=””></div>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</div>
</form>
</div>
<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!–End mc_embed_signup–>

Hmmmm, why is my code SO long compared to others?

I got the form to work but did not touch it after copying the code. It’s not centered. ??

Hi there thebusywoman,

Looks like you’re working with the MailChimp embed form code generated from within your MailChimp account. In order to get support on that code, you’ll need to reach out to MailChimp support directly: https://kb.mailchimp.com/help

Here in this forum I’m only able to assist with issues specific to this WordPress plugin, the MailChimp List Subscribe Form plugin. (https://www.ads-software.com/plugins/mailchimp/)

If you are using this plugin, feel free to open a new thread (since this one is marked as Resolved already) with questions or concerns and I’ll be happy to help with plugin-related issues.

-Kath