ATTN: MailChimp Change Starting October 31st, 2017

This blog post will teach you how to add behaviors after submission is success or failure. Depend on what your need is.

Recently I had a client request a last minute setup of a set of landing pages for a marketing project. The plan was to launch a paid advertisement campaign that drives traffic to these pages. Once visitors land on the pages, they would submit their contact information in exchange for a set of freebies. Typical marketing stuff. The challenges were time constraints, creation of landing pages based on designer’s prototype, integration with their MailChimp list, tracking of conversions with their existing Google Analytics account and also a redirect to a 3rd party “freebie” website that they partnered with.

Along with creating these prototype landing pages, the main task is to style and create the behavior of the MailChimp sign-up form upon submission. Long story short, I had to come up with a quick solution to handle this form. Furthermore, the client didn’t really care to safeguard the 3rd party “freebie” link as long as they collect email addresses and tracking conversions.

So I head over to MailChimp and extracted their embedded form for this list and had to come up with a solution to perform these tasks upon successful submission. I had to come up with the fastest way to get this done. Mind you this may not be the most optimal way to do this but it’s the quickest way I could come up with. Enters, DOMSubtreeModified event.

DOMSubtreeModified event allows us to detect DOM change to a specific element using JavaScript. DOMSubtreeModified fires on a node when a modification occurs in the subtree that belongs to it. Let me show you how I was able to enhance this generic MailChimp embedded form. Let’s begin:

This is the generic embedded form that I extract from MailChimp we will use as an example. The form holds three fields: Email, First Name and Last Name.

Code for Generic MailChimp Embedded Form

So how do we incorporate DOMSubtreeModified event into this form to get what we need? Typically a sign-up form would have two elements for responses, and in this form, you’ll find the response elements ID of ‘mce-error-response’ and ‘mce-success-response,’ both have ‘inline display: none’ attached to them. What we want to do is bind the DOMSubtreeModified event to either one of these elements depends on how you want the form to behave on successful submission. In our case, we want to attach it to the success element with the ID of ‘mce-success-response.’ Here’s a snippet of the JavaScript code we’ll need to inject into the form. I included jQuery version and also non-jQuery version (for MailChimp forms use $mcj instead of jQuery for best practice since the following code was invoked ‘var $mcj = jQuery.noConflict(true);’).

Code for Adding DOMSubtreeModified Event to MailChimp

You’ll need to insert this code at the end of the form inside of the JavaScript tag right after the line ‘var $mcj = jQuery.noConflict(true);’. Your final MailChimp form should look something like this.

Code for Final MailChimp Form with Enhanced Functionality On Submit

Hope this help you on your next sign-up form! Please let me know what you think by commenting below. Thank you for reading.