Skip to content

leowebguy/simple-mailchimp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2f223a2 · Oct 8, 2024

History

44 Commits
Feb 22, 2022
Jul 24, 2024
Feb 14, 2022
Aug 25, 2022
Mar 27, 2024
Mar 27, 2024
Oct 8, 2024
Mar 27, 2024

Repository files navigation

Simple Mailchimp plugin for Craft

A minimal Craft plugin to connect forms to Mailchimp


Composer | Important

Craft 5

"require": {
"leowebguy/simple-mailchimp": "^3.0",
}

Craft 4

"require": {
   "leowebguy/simple-mailchimp": "^2.0",
}

Craft 3

"require": {
   "leowebguy/simple-mailchimp": "^1.0.4",
}

Installation

composer require leowebguy/simple-mailchimp

On your Control Panel, go to Settings → Plugins → "Simple Mailchimp" → Install

Credentials

Gather the necessary info from Mailchimp

API Key MC_API_KEY

Go to https://admin.mailchimp.com/lists > Select Audience > Settings > Audience name and defaults > Audience ID

Screenshot

Audience ID MC_LIST_ID

Go to https://admin.mailchimp.com/account/api/ > API Key

Screenshot

Add the credentials to plugin settings

Screenshot

You may also use .env parameters like in the example above.

# Mailchimp
MC_API_KEY=xxx12345x1234x123xxx123xxxxx123xx-us14
MC_LIST_ID=xxx1234xx1234

Usage

Your newsletter form template can look something like this:

<form method="post" id="mailchimp">
    {{ csrfInput() }}
    <input type="hidden" name="tags" value="Tag_1,Tag_2">
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit">Submit</button>
</form>

The only required field is email, all the rest is optional

use the vanilla js example below:

const form = document.getElementById('#mailchimp')
form.onsubmit = (e) => {
    e.preventDefault();
    fetch('/mailchimp/send', {
        method: 'post',
        body: new FormData(this)
    })
    .then((r) => r.json())
    .then((r) => {
        if (r.success) {
            alert(r.msg)
        } else {
            alert(r.msg)
        }
    })
    .catch((e) => {
        console.error(e);
    });
};

or jquery/ajax...

$('form#mailchimp').submit((e) => {
    e.preventDefault();
    $.post({
        url: '/mailchimp/send',
        data: $(this).serialize(),
        success: (r) => {
            if (r.success) {
                alert(r.msg)
            } else {
                alert(r.msg)
            }
        },
        error: (e) => {
            console.error(e);
        }
    });
});