WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
MailChimp - change width. (33 posts)

  1. wordrace
    Member
    Posted 2 years ago #

    Hi I've added the mailchimp plugin to my side and displayed it in the right sidebar.

    Unfortunately for some reason the the mailchimp form is too wide and is cut off on the right hand side. How can I change the width of the form so it fits properly?

    Thanks

    - D

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

  2. wordrace
    Member
    Posted 2 years ago #

    Actually looking again it has resized the form background, but now the text boxes are too big and stick out over the right hand side. Any ideas?

    Thanks

    - D

  3. mc_nate
    Member
    Posted 2 years ago #

    Hey there, Wordrace!

    Excellent question! Generally, by adjusting the CSS, you should be able to adjust the width that the fields display. Just add something like this to your site's "Style.css" file, and it should take care of it!

    #mc_signup_form .mc_input {
    width: _____________; }

    Just set the width to whatever you'd like, either a percentage (50%) or a specific pixel count (500px).

    Let us know if we can help with anything else!

    Cheers

  4. wordrace
    Member
    Posted 2 years ago #

    Thank you!!

    This worked great!

    Cheers

    - D

  5. mc_nate
    Member
    Posted 2 years ago #

    Wheeee!

    Glad to help!

  6. Craig
    Member
    Posted 2 years ago #

    Hi Nate,

    this hasn't worked for me unfortunately. I'm trying to increase the overall width of the plugin to 300px. I've added the code above to my style.css and it's increased the text box sizes, not the background. What else would I need to do to get it all aligned?

    thanks

  7. mc_nate
    Member
    Posted 2 years ago #

    Hey there, Craig!

    Yeah, that specific CSS info is for the input fields. If you want to change the entire width of the form, you'd want to use something like this:

    #mc_signup_form {
    width: 300px;
    }

    I always recommend using Firebug for Mozilla Firefox or Chrome's built-in Developer Tools to figure out exactly what element needs to be styled in your stylesheet.

    If we can assist with anything else, give us a shout!

    Cheers

  8. jschurman
    Member
    Posted 1 year ago #

    I'm trying to do exactly the same thing via http://smartchat.evangelyze.net. The form size is not changing though. Any help would be greatly appreciated!

  9. mc_nate
    Member
    Posted 1 year ago #

    Hey there!

    I had a peek at the site, but couldn't find the form, off-hand. Is it hiding somewhere specific?

  10. bensonxie
    Member
    Posted 1 year ago #

    Hi Nate, it doesn't work for me unfortunately. Could you please see why it doesn't work for me? My website is http://www.foxpowerinverters.com. I customerize my website based on Karma theme.

  11. bensonxie
    Member
    Posted 1 year ago #

    Also, how to change the color of the font because the font is similar to the background. It is hard to see them clear.

  12. mc_nate
    Member
    Posted 1 year ago #

    Hey there, Bensonxie!

    Hmm.... so it looks like you've got the custom styling enabled in the plugin, which is totally cool. However, any stylings you need to adjust should be handled from "Settings" -> "MailChimp Setup" if you want to leave that option on. Otherwise, you'll want to disable that custom styling helper and go from scratch with CSS.

    For changing the font color, you'll generally just want to change the Text Color in that "Custom Styling" area.

    As far as the width of the form goes, can you post a screenshot of what you're seeing specifically and what the desired behavior is?

    Cheers

  13. florianfriedrich
    Member
    Posted 1 year ago #

    Same here... the width of the mailchimp plugin is not right and the plugin looks rather messy. Take a look at http://florianfriedrich.com/?page_id=72 to see what I mean.

    Any suggestions?
    Thanks,
    Florian

  14. AgentIvy
    Member
    Posted 1 year ago #

    Hi, Nate ~
    I, too am having issues with the width of the input boxes. I started with
    #mc_signup_form .mc_input {
    width: _____________; }
    but it didn't change anything. I've tried futzing with a bunch of different things but to no avail.

    Could you please take a quick peek and tell me if I'm missing something obvious? The link is http://thenewmoneyschool.com/about/.

    Thank you so much,
    Alison

  15. mc_nate
    Member
    Posted 1 year ago #

    Hey there!

    After having a peek at the site, it appears that the general CSS has a rule for all inputs to have a minimum width of 210px. If you wanted to fix that specifically for MailChimp, you could add a "min-width: 0px;" style to that mc_input class.

    After that, add your own width and have at it!

    Hope that helps!

    Cheers

  16. AgentIvy
    Member
    Posted 1 year ago #

    You, Nate, are fabulous!! Thank you for helping me not to lose anymore hair.

  17. mc_nate
    Member
    Posted 1 year ago #

    Whoooo!

    Happy to help. :)

  18. AndreasStrauss
    Member
    Posted 1 year ago #

    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?

  19. mc_tak
    Member
    Posted 1 year ago #

    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

  20. AndreasStrauss
    Member
    Posted 1 year ago #

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

    Take a look: http://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

  21. mc_tak
    Member
    Posted 1 year ago #

    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

  22. AndreasStrauss
    Member
    Posted 1 year ago #

    Woohoo!

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

  23. mc_tak
    Member
    Posted 1 year ago #

    Yo yo,

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

    -tk

  24. Agwest
    Member
    Posted 1 year ago #

    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

  25. bcdodge
    Member
    Posted 1 year ago #

    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?

    http://mentalhealth4muslims.com/

  26. mc_tak
    Member
    Posted 1 year ago #

    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!

  27. mc_tak
    Member
    Posted 1 year ago #

    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

  28. Agwest
    Member
    Posted 1 year ago #

    @ 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.

  29. bcdodge
    Member
    Posted 1 year ago #

    @mc_tak

    You are the man! :)

  30. angiewfl
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags