Skip to content
Atomic Addons

ProUpdated 5 min readView demo

The Mailchimp widget by Atomic Addons adds a newsletter sign-up form to any page. Visitors enter their email, and optionally their name, and are added to your Mailchimp audience without leaving the page. You can add an icon, text above and below the form, and arrange the fields in a row or stacked. This guide covers connecting Mailchimp, adding the widget and its settings.

Enable the Mailchimp Widget

Mailchimp is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

  1. 1

    Go to WordPress Dashboard → Atomic Addons.

  2. 2

    Click the Widgets tab.

  3. 3

    Search for Mailchimp. You can also open the Forms / User category.

  4. 4

    Turn the Mailchimp widget on.

  5. 5

    Click Save Settings.

Connect Your Mailchimp Account

The widget needs your Mailchimp API key and the ID of the audience to add people to:

  1. 1

    In Mailchimp, create an API key under Account → Extras → API keys, and find your Audience ID under Audience → Settings → Audience name and defaults.

  2. 2

    Go to WordPress Dashboard → Atomic Addons → Settings.

  3. 3

    In Mailchimp, paste them into Mailchimp API Key and Audience (List) ID.

  4. 4

    Click Save Settings.

Until both are set, the widget shows a reminder in the editor and nothing to visitors. Every Mailchimp widget on the site uses the same audience.

Add the Mailchimp Widget

  1. 1

    Open the page in Elementor (Edit with Elementor).

  2. 2

    In the widget panel, search for Mailchimp. The widget sits in the Atomic Addons category.

  3. 3

    Drag it into the page and set it up with the controls below.

  4. 4

    Click Publish (or Update).

Layout

Open the widget and go to Content → Layout:

  1. 1

    Show Before Icon: An icon in front of the fields. Off by default. Choose Icon picks it; an open envelope by default.

  2. 2

    Inline Before Icon: With the icon on: places the icon inside the first field instead of beside it.

  3. 3

    Show Name: Adds a name field before the email field. Off by default. Name Field Placeholder is its hint text, “Name” by default. The name is saved to the subscriber's first name in Mailchimp.

  4. 4

    Email Field Placeholder: The hint text in the required email field, “Email *” by default.

  5. 5

    Before Text / After Text: A line of text above or below the form, such as “Get our weekly tips”. Both empty by default.

  6. 6

    Text Alignment: With before or after text: left, center, right or justified.

  7. 7

    Fullwidth Fields: Stacks the fields and button, each field across the full width. Off by default: the fields and button sit in one row and wrap on narrow screens.

  8. 8

    Fullwidth Button: With full-width fields: stretches the button across the form too.

  9. 9

    Button Alignment: With full-width fields and a normal button: places the button left, center or right.

  10. 10

    Space Between: The gap between the fields and the button: Default (12px), Small (15px), Medium (30px), Large (70px), Collapse (none) or Custom, which shows a Custom Gap slider.

Signup Button

Content → Signup Button sets the button:

  1. 1

    Button Text: “Subscribe” by default. It accepts dynamic tags.

  2. 2

    Icon: An optional icon in the button.

  3. 3

    Icon Position: With an icon: Right (the default), Left, Top or Bottom of the text.

  4. 4

    Icon Spacing: With an icon: the space between icon and text, 8px by default.

What Visitors See

When a visitor clicks the button, it shows “Subscribing…” and then a message under the form: “Thank you, you have subscribed successfully.”, or a reason it failed, such as an invalid email. The address is added to your audience as subscribed straight away, without a confirmation email; if it is already in the audience, it is set back to subscribed.

Style the Mailchimp

Everything below is on the Style tab. Sections for features you turned off are hidden.

  • Before Icon — the icon's color, size and padding.
  • Field — placeholder color, text color, background, typography, border, border radius, padding and hover border color.
  • Sign Up Button — text color, background, border, border radius, padding and typography in Normal, and text, background and border colors in Hover, with a Hover Animation.
  • Before Text and After Text — color and typography.
  • Message — the result message's color, typography, background, border color, the accent colors for success and error, border radius and padding.

Can't find what you need?

Our support team can help with setup questions and anything the docs don't cover yet.

Contact support