Mailchimp Subscription

readme.md

Mailchimp Form Subscription

An ES6 client side implementation to handle Mailchimp subscriptions. Mailchimp requires its users to inject a monolithic validate.js file ito thier webpage. Fuck that shit. The engineers at Mailchimp should ashamed of themselves. Anyway, if you want a small Vanilla ES6 implementation just use this.

form.html

<form action="http://brixtol.us13.list-manage.com/subscribe/post-json?">
  <input type="hidden" name="COUNTRY" value="SE" id="mce-COUNTRY">
  <input type="text" name="NAME" placeholder="Name" id="mce-NAME">
  <input type="email" name="EMAIL" placeholder="Email Address"  id="mce-EMAIL">
  <button type="submit" name="subscribe" id="mc-embedded-subscribe">
    Submit
  </button>
  <div id="response"></div>
</form>

initialize.js

new Mailchimp('#newsletter-footer', {
  user: 'dca6a1bca0e1882e8f4e2b378',
  list: '9448e68e3a'
});

mailchimp.js

class Mailchimp {

    constructor(element, options){
        this.config = Mailchimp.mergeSettings(options);
        this.element = document.querySelector(element);
        this.form = this.element.firstChild;
        this.inputs = this.form.querySelectorAll('input');
        this.user = this.config.user;
        this.list =  this.config.list;
        this.response = this.element.querySelector(this.config.response);
        this.callback = this.config.callback;
        this.data = '';
        this.robot('b_'+this.config.user+'_'+this.config.list);
        this.init();
    }

    static mergeSettings(options) {

        const settings = {
            user: '',
            list: '',
            callback: 'callback',
            response: '#response',
            robot: ''
        };

        const userSettings = options;

        for (const attrname in userSettings) {
            settings[attrname] = userSettings[attrname];
        }
        return settings;
    }

    static setAttrs(element, attrs) {
        for(let key in attrs) {
            element.setAttribute(key, attrs[key]);
        }
    }

    robot(name){
        const robot = document.createElement('input');
        Mailchimp.setAttrs(robot, {
            'id': 'robot',
            'type': 'text',
            'tabindex': '-1',
            'value': "",
            'name': name,
            'style': 'position: absolute; left: -5000px;',
            'aria-hidden': 'true'
        });
        this.form.appendChild(robot);
    }

    init(){
        this.form.addEventListener('submit', (e) => this.submit(e));
    }

    submit(e){
        e.preventDefault();

        if(this.form.querySelector('#robot').value !== '')
        return false;

        const url = this.form.action.replace('/post?', '/post-json?');

        // Add form data to object
        this.data += 'u='+this.user+'&'+'id='+this.list+'&'+'c='+this.callback;

        for (let i = 0; i < this.inputs.length; i++) {
            this.data += '&' + this.inputs[i].name + '=' + encodeURIComponent(this.inputs[i].value);
        }

        this.script(url);
    }

    script(url){
        // Create & add post script to the DOM
        const script = document.createElement('script');
        script.src = url + this.data;
        document.body.appendChild(script);
        this.success(script);
    }

    success(script){
        // Callback function
        window[this.callback] = (data) => {
            delete window[this.callback];
            document.body.removeChild(script);
            this.response.innerHTML = data.msg;
        };
    }
};