Skip to content

leowebguy/simple-mailchimp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2c2c2d1 · Aug 26, 2022

History

34 Commits
Feb 22, 2022
Aug 26, 2022
Feb 14, 2022
Aug 25, 2022
Aug 26, 2022
Feb 12, 2022
Aug 25, 2022
Aug 26, 2022

Repository files navigation

Simple Mailchimp plugin for Craft

A minimal Craft plugin to connect forms to Mailchimp


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">
    {{ csrfInput() }}
    <input type="hidden" name="tags" value="Tag_1,Tag_2">{# comma separated #}
    <input type="text" name="name">
    <input type="email" name="email">
    <button type="submit">Submit</button>
</form>

The only required field is email. Everything else is optional.

You can use jQuery/Ajax to call plugin controller like the example below

(($) => {
    $('form').submit((e) => {
        e.preventDefault();
        $.post({
            url: '/mailchimp/send',
            data: $(this).serialize(),
            success: (r) => {
                if (r.success == true) {
                    $('form')
                        .append(`<div class='success'>${r.msg}</div>`)
                        .hide().fadeIn()
                        .delay(6000).fadeOut();

                    $(this).trigger("reset");
                } else {
                    $('form')
                        .append(`<div class='error'>${r.msg}</div>`)
                        .hide().fadeIn()
                        .delay(6000).fadeOut();
                }
            }
        });
    });
})(jQuery);

Add jQuery to the template if necessary

{% js 'https://code.jquery.com/jquery-3.6.0.min.js' %}