MailChimp

← Back to all articles

Customize your embedded sign-up form

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 an 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 Microsoft's download page.

Reference Table

Below is a table displaying the possible CSS hooks that will allow you to customize your forms. The image to the right is a graphical representation of how the form is organized.

CSS Selector	Name/Type	Description
General Form Elements
#mc_embed_signup	DIV Element	This DIV element wraps around the form. Use this selector to target anything within the form.
#mc-embedded-subscribe-form	FORM Element	Use this selector to set base width and font size.
div.mc-field-group	Field Group	Container for each label and input combination. Use this to control horizontal and vertical spacing (padding).
div.mc-field-group label	Labels	Default label selector. Use this to style all labels.
div.mc-field-group input	Input(s)	Default input selector. Use this to style all inputs.
div.mc-field-group select	Drop-down Menus	Default select (drop-down) selector. Use this to style all drop-down menus.
fieldset input.btn	Submit Button	Use this selector to style the submit button.
fieldset a	Links	Use this selector to style all links in the form.
Checkboxes and Radio buttons
div.input-group	DIV Element	Main DIV container for checkbox/radio groups.
div.input-group ul	UL Element	UL Container for checkbox/radio groups.
div.input-group ul li	LI Element	LI Element containing the label and input. (checkbox/radio groups)
div.input-group label	Checkbox/Radio Labels	Default checkbox/radio groups label selector.
div.input-group input	Checkbox/Radio Inputs	Default checkbox/radio groups input selector.
Number of subscribers
#num-subscribers	DIV Element	Container for number of subscribers.
#num-subscribers span	SPAN Container	Container for number of subscribers.
Required Fields
.indicate-required	DIV Element	Container for "* All field required" message.
span.note-required	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.
label.error	Error Message	Default error message container.
#mce-error-response	Error Message	Contianer for 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 span	SPAN Element	Date input container
.datefield span label	LABEL Element	Date label(s)
.datefield .monthfield	Text Input	Month text input
.datefield .dayfield	Text Input	Day text input
.datefield .yearfield	Text Input	Year text input
Address Fields
.mc-address-group	DIV Element	Address group containing element.
.mc-address-group label	Label(s)	General address group labels.
.addressfield	Field Group	Containing element for all label and input groups.
.addressfield li	LI Element	Containing element for individual label and input groups.
.addressfield li label	Label(s)	Individual address labels.
.addressfield input	Input(s)	Individual address inputs.
.addressfield select	Drop-down(s)	Individual drop-down selects.