Change Submit Button Color

Hi jorwesflow,

Yes, you can add CSS to your themes stylesheet to accomplish this. I think appearance is something that should be taken care of inside of your theme files and that is why I’ve not yet implemented this in the plugin.

I get many requests about this so I will implement a way to style the form in a future version though.

You can find your theme’s CSS stylesheet in the following location (normally): /wp-content/themes/your-theme/style.css. The plugin shows the exact location of this file on the “Form settings” page.

Hope that helps.

Danny

Danny,
Thanks for the help. I have no problem doing this, but I’m having trouble figuring out what ID or class to use.
– Jordan

Hi Jordan,

Reading this helped me figure there is a small bug in my code since normally this should be shown on the “form settings” page, now it is only if you go to the form-settings tab and then reload the page. I will fix this in a newer version of the plugin. Thank you. ??

Anyway, use the following CSS selector to apply CSS rules to the form submit button.

form.mc4wp-form input[type=submit] { .. }

Perfect! Yeah, that’s weird how “Notes regarding the form designer” just appears after a reload. Everything I needed to know was hiding there the whole time!

Thanks a lot, man.

Jordna

Hello, guys!

I want to change button color also but I am not familiar with CSS styling.

Where exactly can I find that? I wan to change grey color to white. Thank you a lot!

-Vadim

Vadim,

If you have FTP access to your site’s theme files, look for a file most likely called “style.css”.

If you don’t know how to do any of that, go to your WordPress Dashboard. Then go to Appearance > Editor. In the right column, look for your Stylesheet, and click on it to bring it up in the editor.

Scroll all the way to the bottom and add something like this:

.form.mc4wp-form input[type=submit] {
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #000000;
	font-weight: bold;
	font-size: 13px;
}

“.form.mc4wp-form input[type=submit]” is the selector for the Mailchimp button. It basically tells your browser to selectively style the button in the way you specify.

“background” is where you specify your background color. You can use hexadecimal or RGB. info: https://www.w3schools.com/html/html_colors.asp

The other options (color, border, font-weight, font-size) I just put for your information and experimentation. You can remove them from the code if you wish.

If you want to have the button change when your mouse pointer hovers over it, add this code as well and experiment:

.form.mc4wp-form input[type=submit]:hover {
	background: #000000;
	color: #ffffff;
	border: 1px solid #000000;
	cursor: pointer;
	cursor: hand;
}

When you’re done, click “Update File” and reload your webpage to see the results.

Cheers.

Thanks a lot! It works PERFECT!=)

A similar question I want to move the submit button so it appears on the same line as the email box. how do I do that. I have already styled it using the css, but not sure how to move it.

Thanks.

Hi there,

You will need to add a few simple styles to your style.css file (take a look at jorwesflow helpful suggestions above).

How to create an inline form (email field and submit button on the same line)

1. Make sure your input fields are not wrapped in <p> (paragraphs) tags. Your HTML form code should look something like this,

<input type="email" name="email" />
<input type="submit" value="Subscribe" />

2. Add styles to your theme its stylesheet that give the fields a fixed width and make them stay in-line.

.mc4wp-form input[type="email"] { width: 60%; display: inline-block; }
.mc4wp-form input[type="submit"] { width: 40%; display: inline-block; }

You might need to decrease the widths by a few percentages if the submit button still appears on the next line, this depends on your theme and the margin and padding it gives to form elements.

Hope this sets you off in the right direction!

The “submit” button in the contact form (I’m using the Jetpack plug-in) is bright orange. It really doesn’t go with my color scheme at all and is really ugly, at least from my perspective.

Is there a way, using the Customize plug-in for Twenty-Thirteen, to change the color of that button? I can’t find it anywhere in the Customize menu, even though I can change the color of just about anything else on my website using Customize.

I use the Customize plug-in so that I *don’t* have to mess with the CSS, which intimidates the heck out of me, so I don’t want to do it by getting under the hood and changing the CSS code manually. As in I *really* don’t want to do it that way.

So *please* tell me how to do it using the Customize plug-in. Or if there’s somewhere to do it in the JetPack plug-in, that’s fine, too. Just don’t tell me the only way to do it is to manually change the CSS.

Help?

@mmjustus, doesn’t sound like an issue related to the MailChimp for WordPress plugin.

You will probably have better luck asking this in the Themes and Templates support forums.

Good luck!