[Plugin: MailChimp List Subscribe Form] MailChimp – change width.

Whoooo!

Happy to help. ??

Hey mc_nate

This has been driving me insane and im trying to get it working, ive got the input fields width all fine, however i just cant get the text to change colour.

No matter what value i change text colour to in the settings it stays near white and unreadable unless i change the background colour, however i want my BG to remain white.

What css code can i apply to change the text colour?

Hey Andreas!

If you’re looking to change the color of your field labels (like “Email Address” or “First Name”), you should be able to edit that in your plugin’s settings using the “text color” option, under “Form Settings”. Make sure that the one you’re editing currently is the one under “Form Settings” and not “Header Settings”.

If you’re still seeing that your text isn’t changing colors at all, it’s possible there may be something in your CSS code that’s overriding it. In that case, try adding some CSS code specific to the field label in your code, like this:

#mc_signup_form .mc_var_label {
color: black;
}

If you have any questions, let me know! Feel free to post a link to your site with the problematic form too if you have any further questions.

-tk

Thanks for your quick reply, i tried both of these, and still nothing

Take a look: https://www.strausshosting.com.au/~energeti/about/

I tried using the plugin settings to change the text colour to black (#000000), that didnt work so i turned off the custom styling and added the code you gave me to the style.css, the same place where i put the code to change the width of the input (which DID work, and still does)

i’m incredibly confused as to why its not working, even with a direct call to it

Hey there,

I’m seeing this CSS declaration:

#mc_signup_form label {color:#BCBCBC !important;}

Is in your stylesheet, in the file “karma-blue-grey.css”. Because it’s using !important, it’s basically overriding what you may have set elsewhere. If you remove this line of code, or better yet just remove the !important and change the hex color, you should see that start to work.

-tk

Woohoo!

You’re a bloody legend mate, thanks heaps; was pulling my hair out skimming the css files xD

Yo yo,

Awesome, glad to hear. Yeah, that !important declaration is pretty powerful, use with caution!

-tk

Hi,
Trying to clean up the form in the footer. Similar for all pages. Just need input boxes next to the field names for all 3, and how to adjust width so all boxes look the same ?

Disclaimer — total noob at this, but i can cut and paste code to CSS if supplied !!

agwestvet.com

Thanks in adv.

sc

My turn mc_tak!

I see you have helped a lot of people with this thus far…I have also seen that the adjustment needs to be in different places sometimes.
I added the top code to the style.css as recommended, and I had no luck.
My input boxes are to long…help?

https://mentalhealth4muslims.com/

Hey Agwest,

It looks like you’re looking to bring that ‘drop down’ menu to the right of the “Newsletter” label, as well as adjust the width of your fields. Let’s address bringing the ‘drop down’ menu up first.

I wasn’t able to figure out a pure CSS solution, but I did find a workaround that you may consider.

In the workaround, there’s two steps: 1) Convert your drop down options to groups in your list and 2) add a line of CSS to your stylesheet.

To convert your drop down to groups, login to your MailChimp account and go to the Lists tab > click on the Gear icon > then Forms. Click on your “Newsletter” drop down field on your sign up form, then select “covnert to groups” on the right-hand side. Once that’s been converted, go into your WordPress Admin area, then go to your WordPress/MailChimp plugin’s settings and use the “update list” button to refresh your list options. Make sure your group options are set to be visible.

Now, you’ll just want to add this CSS to your stylesheet:

.mc_interests_header {
float: left;
}

You should see that drop down option show up to the right of your field’s label.

In regards to the width of your form’s fields, you can just add some CSS to your stylesheet like this:

#mc_signup_form .mc_input {
width: 200px;
}

And adjust the width as necessary.

If you have any questions, let me know!

Hey bcdodge,

In taking a look at your site, you should be able to control the width of your input fields by adding this to your stylesheet:

#mc_signup_form .mc_input {
width: 100px;
}

If you’re seeing that this isn’t working, can you elaborate a bit on what specific code you’re using to set the width?

-tk

@ mc_tak

Awesome. Worked just like you described.

My input boxes are next to the field names correctly. Is the Vertical Alignment of all 3 boxes controllable through CSS code. Last touch would be to have them indented to the same level where the [Email] box starts.
site

Thanks again for the quick help.

@mc_tak

You are the man! ??

How do I increase the length of the email input box? It is too short for most email addresses.

The current code is as follows:
<input type=”email” value=”” name=”EMAIL” class=”email” id=”mce-EMAIL” placeholder=”email address” required>

I would like to double the length.

@agwest

Awesome, glad to hear. ?? I’m not quite sure what you mean by vertical alignment, though it sounds like you’re ultimately looking to adjust your form fields and labels so that they’re a bit more lined up. So for example, having your input fields all stacked and aligned on the same vertical line.

I’m afraid that since this does go a bit outside of our range of plugin support, and more into a pure CSS question, it’s not something we can provide in-depth troubleshooting on. In just taking a look through a quick Google search, I found a couple great resources which should get you going in the right direction:

https://css-tricks.com/tips-for-creating-great-web-forms/
https://css-tricks.com/label-placement-on-forms/

Best of luck, let me know if you have any questions!

-tk