Not interested in outsourcing your fulfillment?

We give free advice on eCommerce, fulfillment, and shipping!
Check out the ShipShow or contact us on Clarity here:
Or you can always reach us at info@shipsalot.com
Close this window

Get the most out of contact forms: submit customer forms to multiple destinations

Zach Lukaszek, co-Founder of Ships-A-Lot

Zach Lukaszek is a former PhD student turned entrepreneur who enjoys writing about eCommerce, business, and programming.


bird@shipsalot.com

Zach Lukaszek, co-Founder of Ships-A-Lot

Zach Lukaszek is a former PhD student turned entrepreneur who enjoys writing about eCommerce, business, and programming.


bird@shipsalot.com

Get the most out of contact forms: submit customer forms to multiple destinations

double form submission, JavaScript, Marketing, Shopify -

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!

buy one get one

Neat, right? Hit me up as usual if you have any implementation questions.


0 comments

Leave a comment

Please note, comments must be approved before they are published