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.
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 (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 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.
A CSS hook connects server-side content libraries to HTML elements on a webpage via CSS.
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.
The following tables contain CSS hooks you can use to customize your signup forms.
Form global styles
|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)
|Use this selector to set styles on the main form element. Useful for increasing padding around form elements.
|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.
|Default label selector. Use this to style most form labels.
|Default input selector. Use this to style most form inputs.
|Default select (drop-down) selector. Use this to style all drop-down menus.
|Use this selector to style the submit button.
Checkboxes and radio buttons
|Main DIV container for checkbox/radio groups.
|Used to style the outer field label for a checkbox/radio group.
|Unordered list container for checkbox/radio groups.
|div.mc-field-group.input-group ul li
|List item element containing the label and input. (checkbox/radio groups)
|Default checkbox/radio groups label selector. Note: The label comes after the input in checkbox/radio groups.
|Default checkbox/radio groups input selector.
|Container for "*indicates required" message at top of form.
|Container for "*" (asterisk) on labels that are required.
Response Messages (Ajax)
|Container for error responses.
|Div with error message placed below inputs that have a problem.
|The .mce_inline_error class is also added to inputs to add a red border.
|Container for non-input-specific error message.
|Container for success message.
|Container for date fields.
|Default date inputs.
|.datefield .monthfield input
|Month text input
|.datefield .dayfield input
|Day text input
|.datefield .yearfield input
|Year text input
|Hint text for date format (dd/mm/yyyy)
|Address group containing element. The individual address form elements are styled the same as the general form elements listed above.
US Phone Fields
|Container element for phone field inputs.
|.phonefield-us .phonearea input
|Phone area code input.
|.phonefield-us .phonedetail1 input
|Input for first 3 digits of US phone numbers.
|.phonefield-us .phonedetail2 input
|Input for last 4 digits of US phone numbers.
|Hint text for phone input format (###) ###-####