winter/wn-mailchimp-plugin

Mailchimp plugin for Winter CMS

Fund package maintenance!
wintercms
Open Collective

Installs: 259

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 5

Forks: 1

Open Issues: 0

Type:winter-plugin

v2.0.0 2021-04-24 00:49 UTC

This package is auto-updated.

Last update: 2024-10-20 14:13:20 UTC


README

MailChimp integration plugin

This plugin implements the MailChimp subscription form functionality for the Winter CMS.

Configuring

In order to use the plugin you need to get the API key from your MailChimp account.

  1. In the Winter CMS back-end go to the System / Settings page and click the MailChimp link.
  2. Paste the API key in the MailChimp API key field.

Creating the Signup form

You can put the MailChimp signup form on any front-end page. Add the MailChimp Signup Form component to a page or layout. Click the added component and paste your MailChimp list identifier in the MailChimp List ID field. Close the Inspector and save the page.

The simplest way to add the signup form is to use the component's default partial and the {% component %} tag. Add it to a page or layout where you want to display the form:

{% component 'mailSignup' %}

If the default partial is not suitable for your website, replace the component tag with custom code, for example:

<form
    id="subscribe-form"
    data-request="mailSignup::onSignup"
    data-request-update="'mailSignup::result': '#subscribe-form'"
>
    <input type="text" name="email" placeholder="Newsletter subscription">
    <input type="submit" class="btn btn-default" value="Subscribe"/>
</form>

The example uses the standard partial mailSignup::result for displaying the subscription confirmation message. If you don't like the standard message you can create your own partial in your theme and specify its name in the data-request-update attribute. The default partial is located in plugins/winter/mailchimp/components/signup/result.htm.

More fields can be included in the subscription request:

<input type="text" name="merge[FNAME]" placeholder="First Name" />
<input type="text" name="merge[LNAME]" placeholder="Last Name" />

That's it!