mailchimp-it

#Mailchimp-it

Mailchimp-it is a small Javascript Library that turn a simple form into a working mailchimp form using a small PHP script as a dependency.

Getting started

Use the MailchimpIt.php script

My custom script use this Mailchimp PHP wrapper

to install it just

$ composer require drewm/mailchimp-api:dev-api-v3
$ composer install

Use your custom script

If you want to use your own script, because you want to implement your own logic, or simply because you work with a language like Python ❤, just take care with the input's names, you can use the default field names, but if you wan't to use your own names, don't forget to put them in the mailchimp-it configuration.

(function () {
    'use strict';
    mailchimpIt('.yourForm', {
	    ...
        mailInputName: 'YOUR_CUSTOM_MAIL_FIELD_NAME',
        firstNameInputName: 'YOUR_CUSTOM_FIRST_NAME_FIELD_NAME',
        lastNameInputName: 'YOUR_CUSTOM_LAST_NAME_FIELD_NAME',
        ...
    });
}());

HTML

First of all, you need to load mailchimp-it files

<!-- You can customize mailchimp-it.css -->
<link rel="stylesheet" href="dist/mailchimp-it.css"/>
<script src="dist/mailchimp-it.min.js"></script>

Then, prepare your form

<div class="form-container">
    <form class="test_form" method="post" action="src/MailchimpIt.php">
	    <!-- Optional inputs -->
	    <input type="text" name="newsletter_first_name"/>
        <input type="text" name="newsletter_last_name"/>
               
	    <!-- Mandatory input -->
        <input type="email" name="newsletter_mail" required/>
        <button type="submit">subscribe</button>
    </form>
</div>

Javascript

Basic usage

(function () {
    'use strict';
    mailchimpIt('.test_form');
}());

Mailchimp-it allow you to customize a lot of things

(function () {
    'use strict';
    mailchimpIt('.test_form', {
        successMessage: 'Thanks for subscribing !', //Default success message
        successMessageBefore: null, //innerHTML before success Message
        successMessageAfter: null, //innerHTML after success Message
        successMessageClassName: 'mailchimp-it-success', //Success message div class
        onSuccess: function () { //Callback on Success
            return;
        },
        errorMessageClassName: 'mailchimp-it-error', //Error message div class
        errorMessageBefore: null, //innerHTML before error Message
        errorMessageAfter: null, //innerHTML after error Message
        errorMessageTimeout: 5000, //Time that error message will be displayed
        onError: function () { //Callback on error
            return;
        },
        mailInputName: 'newsletter_mail', //default mail input name
        firstNameInputName: 'newsletter_first_name', //default first name input name
        lastNameInputName: 'newsletter_last_name', //default last name input name
        loaderElt: null //There is a default SVG loader when is set to null, but you can put here you own loader in raw HTML
    });
}());

Custom example

(function () {
    'use strict';
    mailchimpIt('.test_form', {
        successMessage: 'Thanks for subscribing, you\'ll be notified for the next update !',
        successMessageBefore: '<p>Hell Yeah !</p>',
        loaderElt: '<p>Please Wait... <img src="img/myCustomLoader.gif"/></p>',
        onSuccess: muCustomFunction()
    });
}());

Want to use jQuery ? No problem

(function ($) {
    'use strict';
    $('.test_form').mailchimpIt({
        successMessage: 'Thanks for subscribing, you\'ll be notified for the next update !',
        successMessageBefore: '<p>Hell Yeah !</p>'
    });
}(jQuery));