Support » Plugin: MailChimp List Subscribe Form » How the heck do you style a Mailchimp form?

  • Greetings,

    I am fumbling over how to style the MailChimp widget fields. I already tried adding the code I found here http://wordpress.org/support/topic/editing-css-button-padding posted by Luke America in my theme’s style sheet but nothing changed. I’m not really sure that was the code I wanted but I was experimenting to see if I could get control of the css. I failed.

    It seems there may be somewhere a fact sheet with the id and class names required to style the widget, is there? And is it to the style sheet for my theme (Catalyst/Dynamik) that I add the code once I figure out the ids and class names?

    You can see what I have here in the right sidebar
    http://www.beyondbones.com/blog-posts/

    and here in the footer on the home page
    http://www.beyondbones.com.

    I’d like my form to be much more visually balanced like these at
    http://diythemes.com/thesis/mailchimp-email-signup-forms/

    or

    http://www.felicityfields.com/wp-content/uploads/2012/09/Felicity-Fields.com-Resources-Opt-In-Skin-email-List-Email-sign-up-Wordpress-Plug-in-Aweber-MailChimp-email.jpg

    or

    http://cascadevalleydesigns.com/wp-content/uploads/2013/01/signup-form.jpg

    I need to change my field names, field sizes. I need to add some text between the widget/list title and the fields, and I want the text boxes to be wider and perfectly aligned. I also want to delete ‘address’ and only have ’email’. I’d like the field titles to be in the text box and then disappear/be replaced by using the form. Maybe this is all too much to ask but it all seems pretty basic to me, if only I could find the id and class names and where you’re supposed to input the code.

    Thank you, sorry my message is so long. kkr
    **********
    Here’s a copy of my note to MC.

    I have more questions.

    I used the MC plugin and widget for wordpress to add an email capture form to my website http://www.beyondbones.com.

    I have spent most of today trying to figure out how to style it but to no avail. I looked at the MC support docs but everything there that seems to address my issue does not relate to or look anything like on my website. For instance, in one doc it says to hover over the form field to change the field title i.e. “first name” to just “first” or whatever, but when I mouse over my fields no options appear.

    I’ve read the help files in the widget forum and looked elsewhere on the web but I do not see how to style my form and, as it is, it is not visually pleasing.

    Was I supposed to build my form on MC and then somehow connect or embed it in my wordpress site? If so, I don’t see what the widget is for. When I clicked the MC option to create forms–integrations there is a wordpress link but I don’t find any good explanation of how to style the form.

    I’m feeling frustrated.

    There are two other issues I’d like to bring to your attention.
    One is that MC still interferes with my Catalyst/Dynamik css builder. I sent a message about this back in February (Ticket# LTK1212502685663X).

    Now I’ve lost track of the other issue so will write again when I remember what it was.

    Thanks,

    kkr

    p.s. Will post a copy of this message to WP MC plugin and widget support forums.

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

Viewing 15 replies - 1 through 15 (of 15 total)
  • Hey there kkr,

    Thanks for posting! There’s a few questions here, so I’ll address them in the order mentioned.

    Ultimately, in order to style the plugin’s sign up form you’ll need to identify the ID’s and Classes (as you mentioned) that you’d like to target with your CSS code, then write the CSS code and add it somewhere on your WordPress page. One option is to add this to your current WordPress theme’s stylesheet, which is generally available to edit inside of the WP-Admin interface (it should be under WP-Admin > Appearance > Editor, then select the theme and locate the stylesheet there).

    To identify what elements need to be targeted by the CSS code I’d recommend using a tool like Firebug, which will allow you to see the naming conventions of the various elements in the plugin form in order to better target them.

    You mentioned a few things you’d like to do:

    Change field names. To change your field labels, you’ll want to go into your MailChimp account, then edit the field names there. Once you’ve done that, log into your WP-Admin area, go to your plugin’s settings and click “update list” at the top. You should see those field names updated.

    Change field sizes. This depends on what in particular you’re looking to edit about the fields (width, height, text size, etc). You can target these input fields by adding a block of CSS like this:

    #mc_signup_form .mc_input {
    width:250px;
    }

    Add text between widget and list title. The plugin actually provides an area to setup a Subheader in your plugin’s form, so this may be what you’re looking for. To access that, go to your plugin settings inside of WP-admin and add to the “Sub-header Content” field that’s there.

    If you have any additional questions or specific things you’d like to change about your form after applying the above, feel free to post back here and I’d be happy to take another look and provide as much help as I can!

    When looking to find the ID’s and Classes, there really is no better tool than Firebug and the “inspect element” tool inside of Chrome. These tools let you highlight the elements and see what styles and naming conventions each element is being affected by, and makes the styling process a lot easier (it even lets you make changes to the CSS right there on the page, without affecting anything on the live server). Best of luck and please don’t hesitate to post here with any additional questions!

    -tk

    Hi KK. You mentioned Catalyst/Dynamik, and I’ve been playing around with widget formatting in that by trial and error. Go to Advanced options – Custom CSS and put stuff in there to have it overwrite settings elsewhere.

    Here’s what I’ve got so far. The first bit is to control the size and position of the fields. The next bit formats the submit button (though I notice iOS alters it). The last bit makes the success message appearing in the widget reflect my site colours. It’s involved a lot of “inspect elements” in Chrome!

    .mc_select {width: 220px;}
    .mc_input {width: 120px; height: 11pt; float: right;}
    
    #mc_signup_submit {
    margin: 14px 0 16px 0;
    padding: 6px 16px 6px 16px;
    border: 0px;
    font-family: source sans pro, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background-color: #e46c00;
    }
    
    .mc_success_msg {color: #ac0a99;}

    Help with RSS to e-mail set up in MAILCHIMP.

    I am setting up an RSS driven campaign now. I chose the RSS Basic template and uploaded my custom banner to the top. I sent out a TEST e-mail and I see it is all text. Is there a way to have the first top photo of my blog post insert into the e-mail automatically? Without a photo it looks like a business letter. I run a fashion business and it needs to look fashionable.

    Thanks

    Sheryl
    Fashion Development Group

    Hey Sheryl,

    I’m afraid that questions specific to the RSS-driven campaign feature are a bit outside of the scope of this forum. The best bet is to reach out to our general Support chimps if you haven’t already. They can be reached by email or live chats here:

    http://kb.mailchimp.com/chat

    -tk

    Hello, my mail chimp sign up form on my blog changed to a weird shape. How do I fix it? http://Www.teespurplemartinishop.com\blog

    Hey there,

    In taking a look at the signup form on the right sidebar of the site that you linked to, it looks like you’re currently using the MailChimp embed code, rather than the WordPress plugin. Because this forum is limited to questions regarding the plugin, I’m afraid that the question is a bit outside of what we’re able to support here. It appears that there are some CSS conflicts with the theme/stylesheet being used on the site, so the best bet would be to reach out to your web developer or designer and identify those conflicts there.

    Let us know if you have any additional questions!

    khumii

    (@khumii)

    hi there… already subscribes message in mailchimp plugin is not showing… can anyone tell me wt could be the issue

    mc_gabe

    (@mc_gabe)

    Hey Khumii,

    I’m definitely happy to take a look and see what’s up. Would you be able to pass us a link to your site so we can see what happens when attempting to use the form? One initial possibility is that something on the site is conflicting with the plugin’s Javascript support. Trying to change the “Use Javascript support?” preference under List Options and saving that change can help determine if the issue lies with Javascript support or with CSS settings.

    I look forward to hearing back from you!
    -Gabe

    Razmagaz

    (@razmagaz)

    Hi there,

    I’m also having issues with a MailChimp plugin and it’s formatting. I’m trying to get the form to align centre at the bottom of this page: http://mothersruin.co.uk

    I’ve tried all the align / border commands you’d normally expect to work but the form seems to be ignoring all of them.

    I suspect it might be because it’s a widget rather than a plug in but I’m a total novice when it comes to things like this. The form was set up by someone else who isn’t generally available to provide any support, so any advice / solutions would be greatly appreciated!

    Gareth

    mc_gabe

    (@mc_gabe)

    Hey Gareth,

    That’s a great question. From looking at your page, you should be able to center the plugin on the page by adding this to your theme’s CSS:

    #mc_signup {
    width: 50%;
    margin: 0 auto;
    }

    Changing the width percentage can change the size of the form, and you can also change it to a pixel count (300px instead of 50% for example). The margin line is what will cause it to be centered within the display area it’s constrained to. That should get you taken care of!

    -Gabe

    Razmagaz

    (@razmagaz)

    Thanks for your reply Gabe; I’ve given it a try but it’s still stuck to the left, even after making these changes (I’m viewing in Safari in case that’s relevant).

    I have noticed the following HTML directly under the code you’ve highlighted which might be relevant. Any other ideas?

    /*form*/
    /*
    :focus{ outline:none; }
    .form > div{ margin-bottom:20px; width:100%; position:relative; }
    .form > div > label{ width:100px; float:left; margin-top:10px; }
    .form #name, .form #email, .form #subject, .form #message, .inputtext, .form select, #commentform textarea {padding:10px; border:1px solid #d9d9d9; font-family: ‘Open Sans’, sans-serif; font-size:13px; }
    .form #name:focus, .form #email:focus, .form #subject:focus, .form #message:focus, .inputtext:focus, .form select:focus{border:1px solid #8a8a8a;}
    .form #name, .form #email, .form #subject, .form #message, .inputtext, .form select { -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:none; }
    .form #name, .form #url, .form #email { margin-right:20px; width:23%; }
    .form #message{ width:97%; max-width:97%; max-height:10%; }
    */

    mc_gabe

    (@mc_gabe)

    Hey Gareth,

    I took a look at your updated site and it actually looks from this end as if your form is now centered beneath the image, with only the “Mother’s Mailing List” text being left left-aligned. It’s possible in this case that your browser is caching the previous version of the page, so forcing a refresh of the page or emptying your browser’s cache could help show the newer version. (I tested the page in Chrome, Safari, and Firefox.)

    To get that small header text centered above the form now, only one small change needs to be made. This line:
    <div class="mc_custom_border_hdr">Mother's Mailing List</div>
    Should get a text-align style attribute added:
    <div class="mc_custom_border_hdr" style="text-align: center;">Mother's Mailing List</div>

    That will center that header as well and should have you all set. As the site is right now, though, I can see that your form is centering properly.

    If you run into any trouble, let us know!
    -Gabe

    madelgado730

    (@madelgado730)

    Newbie here…
    So I’m trying to style the MailChimp form to look better within the site:

    http://www.icehotelmusic.com/

    1. I’d like it centered

    2. I’d like all of the background in the header and everywhere to be black.

    All help is appreciated.

    Thanks!

    mc_gabe

    (@mc_gabe)

    Hey madelgado730,

    I’m happy to help out here. It looks like the white background for that area is actually due to something outside of the plugin’s form (with the way the widget section is set up within the page). To set that background to black, you can put the following code into your site’s theme’s CSS file:

    .side_bar_widget {
    background: none;
    }

    For centering that widget area in your site, you should be able to add this to the theme’s CSS:

    footer .row {
    margin: 0 auto;
    width: 50%;
    }

    Due to the way the footer is set up on the site, changing the width value to lower and higher numbers will move the form to the right and left, respectively. (Lower -> Right, Higher -> Left)

    That should get things sorted out for you!
    -Gabe

    madelgado730

    (@madelgado730)

    Great! That helps a lot!
    Thanks!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘How the heck do you style a Mailchimp form?’ is closed to new replies.