Add a Mailchimp subscribe feature to an existing contact form

The Problem

I have a contact form that when submitted emails the form's details and saves them to a database. I also need to add the submitted email address to a Mailchimp list.

The Idea

Create a hidden form that grabs the input from the form being completed. When the visible form is submitted, use jQuery to submit both forms.

Implementation

The HTML...

<form id="contact" action="/some/action.php" method="POST">
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
  <input id="emailInput" type="email" name="email" />
</form>

<form id="mcForm" action=" method="POST">
  <input id="mcEmail" type="email" name="email" />
</form>

Always grab your DOM element

First, we're going to grab our form. There are different ways of doing this, but we gave the form an ID, so let's grab that. Once we have our form we need to write a function for when the form submits. The first thing our function should do is prevent the form's default action. We're then going to assign variables to the email input fields we need. To complete this function we'll assign the contact form email value to the Mailchimp form email input. Finally, create a callback function that will submit to Mailchimp.

Note: .val() is a jQuery method that will return the value of that element if it has one. .val( value ) is a jQuery method that will assign whatever value is.

<script>
  $('#contact').submit(function(event) {
    event.preventDefault(); 

    // the value of the email input 
    contactEmail = $('#emailInput').val(); 

    // the DOM node of the Mailchimp input var
    $mcEmail = $('#mcEmail')
  
    // assign contactEmail to $mcEmail 
    $mcEmail.val(contactEmail); 

    // callback function where all the magic will happen 
    submitMC();
  }
</script>

Meat and Potatoes

Our callback function will submit the Mailchimp form. But like before, we need to assign some variables and prevent the form’s default action. Then we'll perform an asynchronous HTTP (Ajax) request using the jQuery method, .ajax(). The Ajax method will take several options/settings. After our successful AJAX request we'll submit our Mailchimp form, and create another callback function to submit our original contact form.

Note: To get the form's action URL we will use the jQuery method .attr(attributeName). This will return a string. .serialize() is a jQuery method that will encode form elements as a string for submission. The dataType: "jsonp" is specific for Mailchimp and has to do with the callback function at the end of the action URL.

<script>
  function submitMC() {
    var that = this;
    var $mcForm = $(&#039;#mcForm&#039;);
    
    $mcForm.submit(function(event) {
      event.preventDefault();
      var $form = $(this);
      var url = $form.attr(&#039;action&#039;);

      $.ajax({
        type: "POST",
        url: url,
        data: $form.seralize(),
        dataType: "jsonp",
        success: function(data) {
          that.submitContact();
        }
      });
    });
    
    $mcForm.submit();
  }
</script>

Submit the contact form

Note: We're using .unbind( event ) to remove the previously attached event listener from our original function.

<script>
  function submitContact() {
    $('#contact').unbind('submit').submit();
  }
</script>

Mailchimp specifics

The forms action URL needs some specific parameters, and the final segment should be /post-json instead of simply /post. The specific parameters are the Mailchimp user ID and the list ID where the email address is being submitted. Also, add c=? to the end of the URL, which pertains to Mailchimp's callback function. The end of the action URL should look something like this:

/subscribe/post-json?u=XXXXXXXXXXX&id=XXXXXXXX&c=?

Follow consent rules

Finally, we need to add a checkbox confirming the user's consent to add their email address to our Mailchimp list, and adjust our contact form submission function to check whether that value is true or not.

<form id="contact" action="/some/action.php" method="POST">
  ...
  <input type="checkbox" id="subConfirmation" name="subConfirmation" value="newsletter"/>
  ...
</form>

Now let's update the original contact submission function to check if the user consented.

<script>
  $('#contact').submit(function(event) {
    event.preventDefault();
    var isChecked = document.getElementById('subConfirmation').checked;
    if (isChecked) {
      // if true, run our Mailchimp stuff
      var contactEmail = $('#emailInput').val();
      var $mcEmail = $('#mcEmail')
      $mcEmail.val(contactEmail);
      submitMC();
    } else {
      // the user hasn't given consent, just submit the contact form
      submitContact();
    }
  }
</script>

Now we have a contact form with a consent input, that when checked will also submit the user’s email address to our Mailchimp list!