Using Mailchimp with CodeIgniter

On my new everythingyouliked.com site I wanted to include a MailChimp subscription form. Here’s the breakdown of how I did this.

First of all I’ve used the excellent CodeIgniter Library for MailChimp API v1.3 from Wayn Hall. I’ve placed the MCAPI.php into the application/libraries folder and renamed it to Mcapi.php, and renamed the class itself to Mcapi:

<?php
class Mcapi{

On the MailChimp site I’ve collected my API Key (Account, Extras, API Keys & Authorized apps) and after creating a new mailinglist I got the list id (Lists, settings, list settings and unique id. Since these are config values, I stored them in my site’s config file in application/config/my_site.php

/*
* MailChimp Settings
*/
$config['mailchimp_key'] = 'xxxxxxxxxxxxxxxxxxxxxxx-us2';
$config['mailchimp_list_id'] = 'yyyyyyyyy';

My config file is autoloaded through application/config/autoload.php:

$autoload['config'] = array('my_site');

In my controller I’ve added a private function to handle the subscription calls

/**
* Handle subscription
* @return string
*/
private function _subscribe(){
	$success = true;
	if(!$this->input->get('firstname')){
		$message =  "No firstname provided";
		$success = false;
	}
	if($success && !$this->input->get('lastname')){
		$message =  "No lastname provided";
		$success = false;
	}
	if($success && !$this->input->get('emailaddress')){
		$message =  "No email address provided";
		$success = false;
	}
	if ($success){
		$this->load->library('Mcapi', array(
			'apikey' => $this->config->item('mailchimp_key')
		));
		if ($this->mcapi->listSubscribe($this->config->item('mailchimp_list_id'), $this->input->get('emailaddress'), array(
			'FNAME' => $this->input->get('firstname'),
			'LNAME' => $this->input->get('lastname')
		)) === true){
			//	It worked!
			$message = 'Success! Check your email to confirm sign up.';
		} else {
			$success = false;
			//	An error ocurred, return error message
			$message =  'Error: ' . $this->mcapi->errorMessage;
		}
	}
	return array('message' => $message, 'success' => $success);
}

The actual controller function itself is :

/**
 * @var dataStorage
 */
private $data;
/**
 * Handle incoming request for /soon/
 * Enter description here ...
 */
public function index()	{
	if ($this->input->is_ajax_request()){
		$result = $this->_subscribe();
		echo json_encode($result);
		exit;
	}
	$this->load->view('soon', $this->data);
}

The view contains just a HTML5 form. There are a lot of small neat little tricks you can do in HTML5 forms with placeholders and required flags. Automatic validation for email fields is done by type=”email” and is done serverside by MailChimp as well. So I skipped the regex validation of the incoming email address in the controller _subscribe() function.

<aside>
	<form method="post" id="keepmeposted" action="/soon" >
		<fieldset>
			<legend class="hidden">keepmeposted</legend>
			<label for="firstname">First name</label>
			<input name="firstname" id="firstname" placeholder="First name" required>
			<label for="lastname">Last name</label>
			<input name="lastname" id="lastname" placeholder="Last name" required>
			<label for="emailaddress">email</label>
			<input id="emailaddress" type="email" name="emailaddress" placeholder="me@everythingyouliked.com" required>
			<button>Keep me posted!</button>
		</fieldset>
	</form>
	<p id="response">
		<img src="/images/yes.png" alt="yes">Yes, we will keep you updated when we will go live!<br>
		<img src="/images/no.png" alt="no">No, we won't spam or sell your email address.
	</p>
</aside>

The form submit is handled by a small JQuery script:

$(document).ready(function() {
	$('#keepmeposted').submit(function() {
		$('#response').html('submitting your email....');
		$.getJSON('ajax/soon/', {
				'emailaddress':$('#emailaddress').val(),
				'firstname':$('#firstname').val(),
				'lastname':$('#lastname').val(),
			}, function(data){
			if (data.success == true){
				$("input").val('');
			}
			$('#response').html(data.message);
		});
		return false;
	});
});

What does it al do?

Whenever you submit the form, jquery will do an ajax call to our controller and will get a response JSON object in return containing two values, a boolean value for success and a string value as message. On success I clear out the form with $(“input”).val(”); and always replace the <p id=”response”> with the result from the ajax call.

What I haven’t done!

I left out the normal form handling for non javascript calls. I also didn’t use the standard form validation required when handling non-javascript submits.