Create a basic MailChimp registration form using your API

Question

I am new to MailChimp and need some help.

With their basic newsletter registration format ... you simply embed some pre-packaged HTML pages on your page. However, the problem is that clicking on sending redirects to the MailChimp page. (I don't want to redirect to MailChimp, I want the user to stay on their own website after clicking submit.)

They provide APIs and lots of documentation, but just zero useful examples. The API is supposed to allow me to fully integrate with my website or application. It seems that when I read something in my documents that apply to me, I click on the link to get more information and I end up in a circle. They tell you how to do it, but they cannot "show" you how to do it.

I can get the API key, they have tons of documentation and a whole bunch of shells and plugins ... PHP, Drupal, Wordpress, etc.

The confusion here regarding their pre-packaged solutions is that I have a regular static HTML page, this is not Wordpress, PHP or Drupal ... so I just don't know where to start ... I don't know, t even know if i should use POST or GET .

I'm not new to the API ... I am very good at getting the Google Maps API to do whatever I want. However, Google provides real working examples in addition to their detailed documentation, as I found out. I just want to see it in action before I can understand the intricacies of the API.

Without any solid examples or tutorials in my online documentation, I ask how to create the most basic HTML registration form using their APIs.

Answer 1

Edition:

After posting this answer, MailChimp released versions 2 and 3 of its API. Version 3 will be the only supported version starting in 2017. As soon as I have the opportunity to test it, I will update this answer for API version 3.

---

MailChimp API v3.0

According to the notice at the top of this page, all previous versions of the API will not be supported after 2016.

My solution uses PHP in the background to handle APIs and jQuery to facilitate Ajax.

1) Download a PHP shell that supports API v3.0. At the time of this writing, the latest MailChimp docs supporting v3.0 haven’t officially stated anything, but some of them are listed on GitHub, so I chose this one .

2) Create the following PHP file store-address.php using your own API key and list identifier, and then put it in the same directory as the wrapper from the first step. Remember to follow the documentation for your wrapper, but they all look pretty similar to this.

 <?php // for MailChimp API v3.0 include('MailChimp.php'); // path to API wrapper downloaded from GitHub use \DrewM\MailChimp\MailChimp; function storeAddress() { $key = "xxxxxxxxxxxxxxx-us1"; $list_id = "xxxxxx"; $merge_vars = array( 'FNAME' => $_POST['fname'], 'LNAME' => $_POST['lname'] ); $mc = new MailChimp($key); // add the email to your list $result = $mc->post('/lists/'.$list_id.'/members', array( 'email_address' => $_POST['email'], 'merge_fields' => $merge_vars, 'status' => 'pending' // double opt-in // 'status' => 'subscribed' // single opt-in ) ); return json_encode($result); } // If being called via ajax, run the function, else fail if ($_POST['ajax']) { echo storeAddress(); // send the response back through Ajax } else { echo 'Method not allowed - please ensure JavaScript is enabled in this browser'; } 

3) Create your HTML / CSS / JavaScript (jQuery) form (it’s not necessary that it be on the PHP page, and the visitor will never see that PHP is used in the background.)

The answer is in JSON, so you have to handle it correctly.

This is what my index.html file looks like:

 <form id="signup" action="index.html" method="get"> First Name: <input type="text" name="fname" id="fname" /> Last Name: <input type="text" name="lname" id="lname" /> email Address (required): <input type="email" name="email" id="email" /> <input type="submit" id="SendButton" name="submit" value="Submit" /> </form> <div id="message"></div> <script src="jquery.min.js"></script> <script> $(document).ready(function() { $('#signup').submit(function() { $("#message").html("Adding your email address..."); $.ajax({ url: 'inc/store-address.php', // proper url to your "store-address.php" file type: 'POST', // <- IMPORTANT data: $('#signup').serialize() + '&ajax=true', success: function(msg) { var message = $.parseJSON(msg), result = ''; if (message.status === 'pending') { // success result = 'Success! Please click the confirmation link that will be emailed to you shortly.'; } else { // error result = 'Error: ' + message.detail; } $('#message').html(result); // display the message } }); return false; }); }); </script> 

---

MailChimp API version 1:

(original answer)

With a little work, I found a site using a PHP example with jQuery. From this, I was able to create a simple jQuery HTML page containing the main registration form. PHP files are “hidden” in the background when the user never sees them, but jQuery can still use and use.

1) Download the PHP 5 jQuery example here ... ( EDIT : links are dead. However, the only important part is the official PHP API shell available HERE .)

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

If you have only PHP 4, just download MCAPI version 1.2 and replace the corresponding MCAPI.class.php file above.

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2) Follow the instructions in the Readme file by adding your API key and list ID to the store-address.php in the appropriate places.

3) You may also want to collect a username and / or other information. You must add the array to the store-address.php file using the appropriate Merge variables.

This is what my store-address.php file looks like, where I also collect the first name, last name and email type:

 <?php function storeAddress() { require_once('MCAPI.class.php'); // same directory as store-address.php // grab an API Key from http://admin.mailchimp.com/account/api/ $api = new MCAPI('123456789-us2'); $merge_vars = Array( 'EMAIL' => $_GET['email'], 'FNAME' => $_GET['fname'], 'LNAME' => $_GET['lname'] ); // grab your List Unique Id by going to http://admin.mailchimp.com/lists/ // Click the "settings" link for the list - the Unique Id is at the bottom of that page. $list_id = "123456a"; if ($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype'])) { // It worked! return 'Success!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.'; } else { // An error ocurred, return error message return '<b>Error:</b>&nbsp; ' . $api->errorMessage; } } // If being called via ajax, autorun the function if($_GET['ajax']) { echo storeAddress(); } 

4) Create your HTML / CSS / jQuery form. This does not have to be on a PHP page.

This is what my index.html file looks like:

 <form id="signup" action="index.html" method="get"> First Name: <input type="text" name="fname" id="fname" /> Last Name: <input type="text" name="lname" id="lname" /> email Address (required): <input type="email" name="email" id="email" /> HTML: <input type="radio" name="emailtype" value="html" checked="checked" /> Text: <input type="radio" name="emailtype" value="text" /> <input type="submit" id="SendButton" name="submit" value="Submit" /> </form> <div id="message"></div> <script src="jquery.min.js"></script> <script> $(document).ready(function() { $('#signup').submit(function() { $("#message").html("Adding your email address..."); $.ajax({ url: 'inc/store-address.php', // proper url to your "store-address.php" file data: $('#signup').serialize() + '&ajax=true', success: function(msg) { $('#message').html(msg); } }); return false; }); }); </script> 

Required Fragments ...

• index.html , built both above and similar. With jQuery, the look and feel are endless.

• store-address.php file downloaded as part of the PHP examples at the Mailchimp website and modified using the KEY API and LIST ID . You need to add other additional fields to the array.

• The MCAPI.class.php file downloaded from the Mailchimp website (version 1.3 for PHP 5 or version 1.2 for PHP 4). Put it in the same directory as your store-address.php , or you must update the url in store-address.php so that it can find it.

Answer 2

Here is an example of using version 2.0 of the Mailchimp API with mailchimp-api (the minimum php abstraction class for working with the Mailchimp API).

 <?php include('MailChimp.php'); $MailChimp = new MailChimp('API_KEY'); $result = $MailChimp->call('lists/subscribe', array( 'id' => 'LIST_ID', 'email' => array( 'email' => $_POST['email'] ), 'merge_vars' => array( 'MERGE2' => $_POST['name'] // MERGE name from list settings // there MERGE fields must be set if required in list settings ), 'double_optin' => false, 'update_existing' => true, 'replace_interests' => false )); if( $result === false ) { // response wasn't even json } else if( isset($result->status) && $result->status == 'error' ) { // Error info: $result->status, $result->code, $result->name, $result->error } ?> 

Learn more about what you can send using an API call in the MailChimp API Documentation .

Answer 3

Here is another example of using version 2.0 of the Mailchimp API using Official PHP Wrapper .

The difference between my example and the others posted here is that I use the subscribe method of Mailchimp_Lists , available through instantiating the Mailchimp class ( ->lists ), rather than a generic call .

 $api_key = "MAILCHIMP_API_KEY"; $list_id = "MAILCHIMP_LIST_ID"; require('Mailchimp.php'); $Mailchimp = new Mailchimp($api_key); $subscriber = $Mailchimp->lists->subscribe($list_id, array('email' => $_POST['email'])); if ( ! empty($subscriber['leid'])) { // Success }