Get the most out of contact forms: submit customer forms to multiple destinations
Motivation
We have a fairly popular contact form here at Ships-A-Lot. This contact form is used to collect information on potential leads (their store, their email, and their shipping volume are key). I wanted the emails entered into that contact form to also be submitted to our MailChimp list (while still offering our perspective clients a double opt-in, of course).
Stack Exchange threads I initially looked at said it wasn’t possible. I agreed that causing this behavior seemed unlikely, so I looked into accomplishing it with AJAX and it was quite simple.
The Code
I’ve got a fiddle you can look over here. This won’t be terribly useful until you actually have that code on a Shopify contact page since it’s formatted for one. You can also peek at the structure of the JavaScript + jQuery portion here:
$('#contact_form').submit(function () {
return false;
});
// Disable the default behavior of the form (#contact_form) submission.
function post_form() { // Make an AJAX/POST to the local Shopify contact form URL
$.ajax({
url: '/contact#contact_form',
type: 'post',
dataType: 'json',
data: $('form#contact_form').serialize(),
success: function(data) {
// don't do nothin'.
}
});
do_mailchimp(); // copy email, submit MailChimp form
indicate_success(); // Show success message, wipe form.
};
function do_mailchimp() { // Submit lead's email to MailChimp embedded form.
document.getElementById("NewsletterEmail").value = document.getElementById("ContactFormEmail").value;
$("#mc-embedded-subscribe-form").submit();
}
function indicate_success() { // What to do once we're all finished.
$("#success").fadeIn("slow");
document.getElementById("ContactFormEmail").value = "";
document.getElementById("name").value = "";
document.getElementById("website").value = "";
document.getElementById("metric").value = "";
}
Look below for a demo of the whole process!
Neat, right? Hit me up as usual if you have any implementation questions.
