Integrate your MailChimp Newsletter Subscription (form)
Integrate a Newsletter Subscription Form with MailChimp’s API

MailChimp’s simple and direct API makes it easy to access the email service provider’s list management tools.

MailChimp is popular with small ecommerce site owners, thanks to the company’s “Free Forever” plan that allows a marketer to send as many as 12,000 emails per month at no charge. In this article, I will describe how to create a basic newsletter subscription form that uses the MailChimp API to automatically add subscribers to a MailChimp list, with some basic PHP and HTML5. This tutorial assumes that you are working with a web server that has PHP installed.

It is worth noting that MailChimp provides excellent API documentation and examples on its developer site.

Build the HTML Form

The first step toward creating a newsletter subscription form that is connected to the MailChimp API is to create the HTML form. In this example, my form collects the user’s email address, first (given) name, and last (family) name.

<form method="get" id="subscription-form">
			<label for="subscribe_email">Email Address, Please:</label>
			<input type="email" name="subscribe_email" id="subscribe_email" required aria-required="true" autocomplete>					
			<label for="subscribe_firstname">Given Name, Please:</label>
			<input type="text" name="subscribe_firstname" id="subscribe_firstname" required aria-required="true" >					
			<label for="subscribe_familyname">Family Name, Please:</label>
			<input type="text" name="subscribe_familyname" id="subscribe_familyname" required aria-required="true" >					
<button type="submit">Subscribe to Newsletter</button>				

There are a couple things to notice about this form. First, I am using the “get” method, which is how I will pass the values from the input fields to the MailChimp API. Notice, also, that I am using the HTML5 “email” input type for my “subscribe_email” field. This input type will do basic email address validation without any JavaScript or PHP coding. Finally, notice that I have made all of the fields required, and I am using aria-required=”true” to help visually impaired users. With a little CSS3, my form will look something like the following. Of course, it won’t do anything yet.

Establish a MailChimp Account

Since I am focusing on working with the MailChimp API, it stands to reason that you will need a MailChimp account. Once you have registered for a MailChimp account and created a list (since our goal is to add subscribers to that list via the API), you will need to collect two numbers for the MailChimp API.

First, you need the unique list ID. You can find this list ID by navigating to Lists > Settings in the MailChimp interface. Select a list and the unique list ID will be near the bottom of the page.

Next, you need an API key. To generate this key, navigate to Account > API Keys & Authorized Apps in the MailChimp navigation. You will need to “add a key” and then almost instantly, MailChimp will display your new key.

Download the MailChimp API for PHP

Once you have unzipped the MailChimp download, you will need to place at least MCAPI.class.php and store-address.php in your site’s folder structure.

Update store-address.php

In an effort to be an appropriately lazy developer (remember that an efficient developer often reuses code), I simply used the store-address.php file MailChimp provided as an example, rather than writing a similar bit of PHP myself. From this code, I removed several lines that I did not need.

You will need to add your API key and unique list ID to this code as the values for the variables $api and $listid. Notice also that I have inserted my form input field names as the specific keys for the $GET superglobal. (In PHP, a “superglobal” is a built-in variable available in any scope.)

<?php /*/////////////////////////////////////////////////////////////////////// Part of the code  by xyz ( Distributed under Creative Commons license ///////////////////////////////////////////////////////////////////////*/ function storeAddress(){ require_once(‘MCAPI.class.php’);
$api = new MCAPI(‘YOUR_API_KEY_GOES_HERE’); $list_id = “YOUR_LIST_ID_GOES_HERE”; $mergeVars = array(
‘FNAME’=>$_GET[‘subscribe_firstname’], ‘LNAME’=>$_GET[‘subscribe_familyname’]
); if($api->listSubscribe($list_id, $_GET[‘subscribe_email’], $mergeVars) === true) { return ‘Success. Check your email to confirm sign up.’; }else{ // An error occurred, return error message return ‘Error: ‘ . $api->errorMessage; } } ?>

To reference this file from my subscription.php file, I used PHP’s built inrequire_once.

<?php require_once (‘store-address.php’); ?>

I want the page to display the subscription form when a user first arrives and display a success message once the form has been filled out. So I wrapped the form in a conditional statement that checks for the existence of a “subscribeemail” key in the $GET superglobal. I used the NOToperator “!” So my conditional reads, “if subscribeemail does _not exist, do the following.”

I am mixing PHP and HTML here, so I use PHP’s alternative syntax.

<?php if (!$_GET[“subscribe_email”]): ?>
… // from HTML here
<?php endif; ?>

I used a similar conditional statement to display the success message.

<?php if ($_GET[“subscribe_email”]): ?>
<p>Thank you for subscribing to Look for a confirmation email soon.</p>
<?php endif; ?>

hat is it. When a user completes the form and clicks the submit button, the MailChimp API will generate a confirmation email and — once the confirmation is complete — the subscriber is added to the MailChimp list.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s