How the heck do you style a Mailchimp form?

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:

https://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? https://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!

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

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

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: https://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

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

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%; }
*/

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

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

https://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!

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

Great! That helps a lot!
Thanks!