QuickBooksHelpIntuit

CSS Hooks for Customizing Forms

by Intuit• Updated 3 months ago

Each Mailchimp audience comes with a hosted signup form that can be customized using our form builder. For users on a paid plan that want more control over the look and feel of their hosted signup form, Mailchimp has an advanced mode that offers access to the form code. Use CSS hooks within the form code to modify front-end elements on your signup form using code from server-side sources.

In this article, we’ll define CSS and CSS hooks, share popular development tools, and provide reference tables with CSS hooks you can use on a Mailchimp signup form.

Things to know

Here are some things to know before you begin this process.

This is an advanced feature and is recommended for users familiar with custom coding. Contact your developer, or hire a Mailchimp Expert if you need assistance.
If you have little to no custom coding experience, you can use the form builder to build, design, and translate your hosted signup form.
Mailchimp's signup forms can contain up to 30 custom audience fields. The Premium plan includes up to 80 custom audience fields.

Definitions

Elements (HTML)
Elements in HTML are all of the components that make up a webpage. They can contain data, text, images, or nothing based on the properties and attributes placed in them.

CSS
CSS (Cascading Style Sheets) is a style sheet language that controls how elements are presented on a webpage. It can be used for styling text, assigning elements to specific parts of a page, creating animations, and more.Check out this CSS introduction from W3Schools.

CSS selector
CSS selectors are used to identify elements that you’d like to customize. There are 5 selector categories that are usually based on an element's name, a class, or an ID.

CSS hook
A CSS hook connects server-side content libraries to HTML elements on a webpage via CSS.

Development tools

Most modern web browsers come with a developer console that can help debug issues, log errors, and support with code testing. After adding CSS hooks to your form code, use one of the following developer extensions to see your edits in real time.

Firefox Developer Tools is a powerful web development extension for Firefox.

DevTools is a browser-based development suite available in Microsoft Edge. For Internet Explorer users, F12 Developer Tools is a similar product that works with all versions of Internet Explorer.

Chrome DevTools is a part of Google Chrome's Developer Tools.

Reference tables

The following tables contain CSS hooks you can use to customize your signup forms.

Form global styles

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 following selectors 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, allowing 2 fields 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

CSS Selector	Name/Type	Description
div.mc-field-group.input-group	DIV Element	Main DIV container for checkbox/radio groups.
div.mc-field-group.input-group strong	Bold Tag	Used to style the outer field label for a checkbox/radio group.
div.mc-field-group.input-group ul	UL Element	Unordered list container for checkbox/radio groups.
div.mc-field-group.input-group ul li	LI Element	List item element containing the label and input. (checkbox/radio groups)
div.mc-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.mc-field-group.input-group 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 "*" (asterisk) 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 JavaScript will write as an inline style “display:block;” to show messages when needed.
div.mce_inline_error	DIV Element	Div with error message placed 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	Success 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

CSS Selector	Name/Type	Description
.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 (###) ###-####

Mailchimp

Sign in now for personalized help

See articles customized for your product and join our large community of QuickBooks users.