Marketing · Elementor
Mailchimp widget for Elementor
A Mailchimp subscribe form styled in Elementor. Connect an audience, then match fields to your list.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A Mailchimp subscribe form styled in Elementor. Connect an audience, then match fields to your list.
render() writes HTML data attributes: data-clear-fields, data-list-id, data-loading.
Mailchimp is a server-side integration in this widget (API key / list ID), not a form embed.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Mailchimp”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Select Audience”, “Clear Fields On Submit (Pro)”, “Show Form Header”, “Form Title”. Style and Content tabs are listed on this page.
When to use it
- A footer newsletter block.
- A blog sidebar opt-in.
- A landing-page capture that syncs to Mailchimp.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Mailchimp.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Settings — Select Audience | The chosen value is read in render() and applied on the front end. |
| General — Clear Fields On Submit (Pro) | Switcher inspector control (`clear_fields_on_submit`). |
| General — Show Form Header | Switcher inspector control (`show_form_header`). |
| General — Form Title | Printed in the widget HTML from render(). |
| General — Form Description | Printed in the widget HTML from render(). |
| General — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| General — Icon Position | Options: Top; Left. |
| General — Email Label | Printed in the widget HTML from render(). |
| General — Email Placeholder | Printed in the widget HTML from render(). |
| General — Button Text | Printed in the widget HTML from render(). |
| General — Button Loading Text | Printed in the widget HTML from render(). |
| General — Success Message | Printed in the widget HTML from render(). |
| General — Error Message | Printed in the widget HTML from render(). |
| General — Show Extra Fields (Pro) | Switcher inspector control (`extra_fields`). |
| Container — Alignment | Options: Horizontal; Vertical. |
| Container — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-form`. |
| Container — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-form`. |
| Container — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Container — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Form Header — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Form Header — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Form Header — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 10, max 100). |
| Form Header — Icon Bottom Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Form Header — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Header — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-mailchimp-header h3`. |
| Form Header — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Header — Typography (Header Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-mailchimp-header p`. |
| Form Header — Title Bottom Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Form Header — Description Bottom Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Labels — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-mailchimp-fields label`. |
| Labels — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 25). |
| Fields (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Fields (Normal) — Placeholder Color | Writes CSS (input, color) onto the widget’s front-end markup. |
| Fields (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Fields (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Fields (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-fields input`. |
| Fields (Focus) — Text Color | Writes CSS (input, color) onto the widget’s front-end markup. |
| Fields (Focus) — Placeholder Color | Writes CSS (input, focus, color) onto the widget’s front-end markup. |
| Fields (Focus) — Background Color | Writes CSS (input, background-color) onto the widget’s front-end markup. |
| Fields (Focus) — Border Color | Writes CSS (input, border-color) onto the widget’s front-end markup. |
| Fields (Focus) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-fields input:focus`. |
| Fields — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Fields — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-mailchimp-fields input`. |
| Fields — Input Height | Writes CSS (height, line-height) onto the widget’s front-end markup. (min 30, max 100). |
| Fields — Gutter | Writes CSS (margin-bottom, margin-right) onto the widget’s front-end markup. (min 0, max 50). |
| Fields — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Fields — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Fields — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Fields — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button — Alignment | Writes CSS `align-self` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Button (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-subscribe-btn`. |
| Button (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-subscribe-btn`. |
| Button (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-subscribe-btn:hover`. |
| Button (Hover) — Color | Writes CSS (king-addons-mailchimp-subscribe-btn, color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (king-addons-mailchimp-subscribe-btn, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-mailchimp-subscribe-btn:hover`. |
| Button — Transition Duration (seconds) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.1, min 0, max 5). |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-mailchimp-subscribe-btn`. |
| Button — Width | Writes CSS `width` onto the widget’s front-end markup. (min 30, max 300). |
| Button — Height | Writes CSS (height, line-height) onto the widget’s front-end markup. (min 10, max 100). |
| Button — Top Distance | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 50). |
| Button — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Button — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Message — Success Color | Writes CSS `color` onto the widget’s front-end markup. |
| Message — Error Color | Writes CSS `color` onto the widget’s front-end markup. |
| Message — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Message — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-mailchimp-message`. |
| Message — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Message — Spacing | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 50). |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Mailchimp options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Where do Mailchimp subscribers go?
To the Mailchimp audience configured on the widget (API key and list ID in PHP). That is not the WordPress comments table.
How do I add Mailchimp in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Mailchimp”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Form Builder
A form you build in Elementor: fields, layout, and submit behavior for contact, quotes, and lead capture.
Login | Register Form
AJAX login and registration on a normal Elementor page, with validation and optional extra fields.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Flip Countdown & Timer
A flip-clock countdown with the same job as Countdown, in a different visual style.
Phone Call Button
A click-to-call button that opens the phone app on mobile and still looks like a CTA on desktop.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Mailchimp after you activate it.