↓Skip to main content

Custom Mailchimp AJAX Newsletter Subscribe

··2 mins

I worked on a recent newsletter subscribe, but I could not find anything I wanted in terms of it being ajaxified with all the errors that the Mailchimp API provides, so I made this. This was for a Wordpress installation.

First, I installed the Mailchimp PHP API as a git submodule into the lib directory.

git submodule add https://bitbucket.org/mailchimp/mailchimp-api-php.git lib

You’ll need your Mailchimp API key and the list ID to which you’ll have people subscribe to. Get those and stick them in the wp-config.

    define('MAILCHIMP_APIKEY', 'YOUR_API_KEY');
    define('MAILCHIMP_LIST', 'YOUR_LIST_ID');

We’ll make a mailchimp-subscribe.php in our current wordpress theme folder with the following code. We’ll require the wp-config file to access our mailchimp constants.

We’re catching any exceptions that Mailchimp throws and storing the message in a variable which we’ll use later with the ajax call. This will show the user if they are already subscribed to the newsletter and other such errors. Otherwise, we’re echoing a ‘success’ message for our own custom messaging.

    require('../../../wp-config.php');
    require('../../../lib/mailchimp/src/Mailchimp.php');
    $Mailchimp = new Mailchimp( MAILCHIMP_APIKEY );
    $Mailchimp_Lists = new Mailchimp_Lists( $Mailchimp );

    try {
      $subscriber = $Mailchimp_Lists->subscribe( MAILCHIMP_LIST, array( 'email' => htmlentities($_POST['email']) ) );
    } catch (Exception $e) {
      $error = $e->getMessage();
    }

    if ( !empty( $subscriber['leid'] ) ) {
      echo "success";
    } else if (isset($error)) {
      echo $error;
    }

The javascript to validate the email and then send the ajax if valid, as well as the messaging along the way. This uses jQuery.

    (function() {
      'use strict';

      var newsletterAlert = function(message) {
        $('#newsletter-alert').text(message);
      };

      var isValidEmail = function(email) {
        var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
        return pattern.test(email);
      };

      $('#newsletter').on('submit', function(e) {
        var data,
            $form = $(this),
            $email = $form.find('input[type="email"]');

        e.preventDefault();

        if ( !isValidEmail( $email.val() )) {
          newsletterAlert('Invalid Email Address');
        } else {
          newsletterAlert('Subscribing you now...');
          data = $form.serialize();

          $.ajax({
            url: 'PATH_TO_MAILCHIMP-SUBSCRIBE.php',
            type: 'post',
            data: data,
            success: function(msg) {
              if ( msg === 'success') {
                newsletterAlert('Success! Please check your email to confirm.');
                $email.val('');
              } else {
                newsletterAlert( msg );
              }
            },
            error: function(msg) {
              newsletterAlert('Error! ' + msg.statusText);
            }
          });
        }
      });
    })();

The form itself - foundation was used for this and a lot of the markup is customized, so your results may vary :)

    <form id="newsletter" class="newsletter-signup" action="">
      <div id="newsletter-alert" data-alert class="alert-box info radius">
      </div>

      <div class="row collapse newsletter-signup_container">
        <div class="small-12 columns">
          <label class="tiny-text">Join our Newsletter</label>
        </div>
        <div class="small-8 columns email-input">
          <input name="email" type="email" placeholder="your@email.com" required/>
        </div>
        <div class="small-4 columns submit-input">
          <input type="submit" class="button primary" value="Join"/>
        </div>
      </div>
    </form>
↑