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.
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
Code for Adding DOMSubtreeModified Event to MailChimp
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.
Leave a Reply