CSS Hooks for Customizing Forms

Mailchimp's signup forms can contain up to 30 custom fields. In addition to "Email Address", you can collect data like "first name," "last name," "company," and much more. After you've set up the fields and format of your form, you can customize the look and feel with CSS.

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language that separates document content (HTML or other markup) from document presentation. CSS includes elements like color, font, and position. Check out this intro to CSS from the W3C.

Development Tools

Firebug is a powerful web development extension for Firefox.

IE Web Developer Toolbar is a similar product that works with all versions of Internet Explorer. Check out Internet Explorer Developer Tools.

Google Chrome Web Inspector is a part of Google Chrome's Developer Tools. Like Firebug, the web inspector displays HTML elements associated with a DOM.

Reference Table

The following table contains CSS hooks you can use to customize your forms.

CSS SelectorName/TypeDescription
#mc_embed_signupDIV ElementThis DIV element wraps around the form. Use this selector in front of the other following selectors to ensure styles get applied. (e.g. #mc_embed_signup .mc-field-group)
#mc-embedded-subscribe-formFORM ElementUse this selector to set styles on the main form element. Useful for increasing padding around form elements.
div.mc-field-groupField GroupWrapper 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 labelLabelsDefault label selector. Use this to style most form labels.
div.mc-field-group inputInput(s)Default input selector. Use this to style most form inputs.
div.mc-field-group selectDrop-down MenusDefault select (drop-down) selector. Use this to style all drop-down menus.
input.buttonSubmit ButtonUse this selector to style the submit button.

Checkboxes and Radio buttons

CSS SelectorName/TypeDescription
div.mc-field-group.input-groupDIV ElementMain DIV container for checkbox/radio groups.
div.mc-field-group.input-group strongBold TagUsed to style the outer field label for a checkbox/radio group.
div.mc-field-group.input-group ulUL ElementUnordered list container for checkbox/radio groups.
div.mc-field-group.input-group ul liLI ElementLI Element containing the label and input. (checkbox/radio groups)
div.mc-field-group.input-group labelCheckbox/Radio LabelsDefault checkbox/radio groups label selector. Note: The label comes after the input in checkbox/radio groups.
div.mc-field-group.input-group inputCheckbox/Radio InputsDefault checkbox/radio groups input selector.

Required Fields

CSS SelectorName/TypeDescription
.indicates-requiredDIV ElementContainer for "*indicates required" message at top of form.
.mc-field-group .asteriskSPAN ElementContainer for "*" on labels that are required.

Response Messages (Ajax)

CSS SelectorName/TypeDescription
#mce-responsesDIV ElementContainer for error responses.
div.responseDIV ElementDefault 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_errorDIV ElementDiv with error message placed below inputs that have a problem.
input.mce_inline_errorInput(s)The .mce_inline_error class is also added to inputs to add a red border.
#mce-error-responseError MessageContainer for non-input-specific error message.
#mce-success-responseError MessageContainer for success message.

Date Fields

CSS SelectorName/TypeDescription
.datefieldDIV ElementContainer for date fields.
.datefield inputInput(s)Default date inputs.
.datefield .monthfield inputText InputMonth text input
.datefield .dayfield inputText InputDay text input
.datefield .yearfield inputText InputYear text input
.datefield .small-metaSPAN ElementHint text for date format (dd/mm/yyyy)

Address Fields

CSS SelectorName/TypeDescription
.mc-address-groupDIV ElementAddress group containing element. The individual address form elements are styled the same as the general form elements listed above.

US Phone Fields

CSS SelectorName/TypeDescription
.phonefield-usDIV ElementContainer element for phone field inputs.
.phonefield-us .phonearea inputText InputPhone area code input.
.phonefield-us .phonedetail1 inputText InputInput for first 3 digits of US phone numbers.
.phonefield-us .phonedetail2 inputText InputInput for last 4 digits of US phone numbers.
.phonefield-us .small-metaSPAN ElementHint text for phone input format (###) ###-####

Was this article helpful?

Anything else we can do to improve our site?