In MailChimp, you can easily create a signup form with up to 30 custom fields. So in addition to "Email Address", you can also collect data like "first name" and "last name" and "company" and "title". Using CSS, you can customize the look and feel of your form.

In this article:

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout. Check out this intro to CSS from the W3C.

Development Tools

Firebug is a web development extension for FireFox. It is one of the most powerful web development tools out there. For a general overview of how Firebug works, check out this video.

IE Web Developer Toolbar - Surprisingly, Microsoft offers similar software that will work with Internet Explorer. (All versions.) Check out Internet Explorer Developer Tools.

Google Chrome Web Inspector is a part of Google Chrome's Developer Tools. Similar to Firebug, the web inspector is a tool for viewing HTML elements associated with a DOM.

Reference Table

Below is a table displaying the possible CSS hooks that will allow you to customize your forms.

CSS Selector Name/Type Description
#mc_embed_signup DIV Element This DIV element wraps around the form. Use this selector in front of the other selectors below to ensure styles get applied. (e.g. #mc_embed_signup .mc-field-group)
#mc-embedded-subscribe-form FORM Element Use this selector to set styles on the main form element. Useful for increasing padding around form elements. Field Group Wrapper for each label and input combination on forms with more than one field. Use this to control horizontal and vertical spacing (padding) between inputs. Some .mc-field-group elements also have a .size1of2 class which makes them half size to fit 2 per row. label Labels Default label selector. Use this to style most form labels. input Input(s) Default input selector. Use this to style most form inputs. select Drop-down Menus Default select (drop-down) selector. Use this to style all drop-down menus.
input.button Submit Button Use this selector to style the submit button.

Checkboxes and Radio buttons

CSS Selector Name/Type Description DIV Element Main DIV container for checkbox/radio groups. strong Bold Tag Used to style the outer field label for a checkbox/radio group. ul UL Element Unordered list container for checkbox/radio groups. ul li LI Element LI Element containing the label and input. (checkbox/radio groups) label Checkbox/Radio Labels Default checkbox/radio groups label selector. Note: The label comes after the input in checkbox/radio groups. input Checkbox/Radio Inputs Default checkbox/radio groups input selector.

Required Fields

CSS Selector Name/Type Description
.indicates-required DIV Element Container for "*indicates required" message at top of form.
.mc-field-group .asterisk SPAN Element Container for "*" on labels that are required.

Response Messages (Ajax)

CSS Selector Name/Type Description
#mce-responses DIV Element Container for error responses.
div.response DIV Element Default response message container. This will need to be set to display:none; by default so they don't show as empty styled boxes. The JS will write in an inline style display:block to show them when needed.
div.mce_inline_error DIV Element Div with error message place below inputs that have a problem.
input.mce_inline_error Input(s) The .mce_inline_error class is also added to inputs to add a red border.
#mce-error-response Error Message Container for non-input-specific error message.
#mce-success-response Error Message Container for success message.

Date Fields

CSS Selector Name/Type Description
.datefield DIV Element Container for date fields.
.datefield input Input(s) Default date inputs.
.datefield .monthfield input Text Input Month text input
.datefield .dayfield input Text Input Day text input
.datefield .yearfield input Text Input Year text input
.datefield .small-meta SPAN Element Hint text for date format (dd/mm/yyyy)

Address Fields

.mc-address-group DIV Element Address group containing element. The individual address form elements are styled the same as the general form elements listed above.

US Phone Fields

CSS Selector Name/Type Description
.phonefield-us DIV Element Container element for phone field inputs.
.phonefield-us .phonearea input Text Input Phone area code input.
.phonefield-us .phonedetail1 input Text Input Input for first 3 digits of US phone numbers.
.phonefield-us .phonedetail2 input Text Input Input for last 4 digits of US phone numbers.
.phonefield-us .small-meta SPAN Element Hint text for phone input format (###) ###-####

This feature is limited to certain user levels. You can see your user level on the Users & Account Details page and this article explains what each level can access in the account.

Was this article helpful?
What can we do to improve your experience with articles like this?
Thanks for submitting your feedback!
At this time, we are unable to reply to any responses, but we'll use this information to keep the site up-to-date.
Sorry, we were unable to submit your feedback. Please try again later. Thank you for your patience.

Related Articles