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.

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

General Form Elements
#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.
div.mc-field-group 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.
div.mc-field-group label Labels Default label selector. Use this to style most form labels.
div.mc-field-group input Input(s) Default input selector. Use this to style most form inputs.
div.mc-field-group 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
div.field-group.input-group DIV Element Main DIV container for checkbox/radio groups.
div.field-groupinput-group strong Bold Tag Used to style the outer field label for a checkbox/radio group.
div.field-group.input-group ul UL Element Unordered list container for checkbox/radio groups.
div.field-group.input-group ul li LI Element LI Element containing the label and input. (checkbox/radio groups)
div.field-group.input-group label Checkbox/Radio Labels Default checkbox/radio groups label selector. Note: The label comes after the input in checkbox/radio groups.
div.field-group.input-group input Checkbox/Radio Inputs Default checkbox/radio groups input selector.

Required Fields
.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)
#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
.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
.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 (###) ###-####

Related Articles