Advanced Form Customization
Paid account users can use an advanced mode to edit Mailchimp-hosted signup forms. Learn how to switch to this advanced mode and what you can edit.
Get the job done with a pro
From training to full-service marketing, our community of partners can help you make things happen.
CSS Hooks for Customizing Forms
Copy Article URL
Copied
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 (###) ###-#### |
Technical Support
Have a question?
Paid users can log in to access email and chat support.
Related
Determine Webpage Signup Location
Set up your Mailchimp form to track the web page on which subscribers sign up. Learn about the HTML code and other steps needed to get started.