• About
  • Services
  • Location
  • Reviews
  • Blog
  • Contact
  • Get A Quote
ShipsShips
  • About
  • Services
  • Location
  • Reviews
  • Blog
  • Contact
  • Get A Quote

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

December 18, 2020 Posted by Max Zitney eCommerce

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.

Tags: double form submissionJavaScriptMarketingshopify
Share

About Max Zitney

This author hasn't written their bio yet.
Max Zitney has contributed 25 entries to our website, so far.View entries by Max Zitney

    You also might be interested in

    When to change strategy in eCommerce.

    When to change strategy in eCommerce.

    Dec 20, 2020

    Fulfillment to Amazon FBA

    Fulfillment to Amazon FBA

    Dec 20, 2020

    Buy 1 Get 1 Free Shopify Snippet!

    Buy 1 Get 1 Free Shopify Snippet!

    Dec 18, 2020

    Categories

    • eCommerce
    • Entrepreneurship
    • Guest Blog
    • Shipping
    • Uncategorized

    Phone(901) 410-2153

    E-Mail[email protected]

    FacebookInstagramTwitterYouTube

    Copyright © 2021 Ships-a-lot

    Site by Beanstalk Web Solutions

    Prev Next