Subscribe list users to a MailChimp mailing list using Flash
Tuesday, January 13th, 2009UPDATE:
While this code is still functional and useful for AS 2.0 projects, an updated MailChimp AS 3.0 sample is now available from kohactive!
Here’s some sample code you can use to connect your Flash signup form to the MailChimp API. I recently had a client with an existing MailChimp account ask to allow users to sign up for their newsletter through their website, which has a full Flash interface. Unfortunately I was not able to find much documentation out there about how to make this work, and it took me some hair pulling to get it sorted out. Finally, with the help of Jesse Peterson and the API team at MailChimp, we were able to get a working version that doesn’t require any additional PHP or other backend scripting. Here’s the AS:
// Edit your MailChimp specifics here.
// You shouldn't have to edit anything but these two variables
// unless you are collecting additional data.
_global.apiKey = "YOUR_MAILCHIMP_API_KEY";
_global.listID = "YOUR_MAILCHIMP_LIST_ID";
// set tab order for form usability
firstName_txt.tabIndex = 1;
lastName_txt.tabIndex = 2;
email_txt.tabIndex = 3;
submit_mc.tabIndex = 4;
// submission
submit_mc.onRelease = function()
{
// show a loading message in case transmission is slow
response_txt.text = "Sending…";
// gather form data
var firstName:String = firstName_txt.text;
var lastName:String = lastName_txt.text;
var email:String = email_txt.text;
// check the email address
// if it's valid…
if(validEmail(email)){
// disable the submit button while loading data
submit_mc.enabled = false;
// set up result xml
var result_xml:XML = new XML();
result_xml.ignoreWhite = true;
result_xml.onLoad = function(success){
// if the user is subscribed successfully, the result set
// will look something like
// <MCAPI type="boolean">1</MCAPI>
// so you can reset the form and display
// the confirmation message.
if(result_xml.firstChild.firstChild.toString() == "1"){
resetForm("Please check your email to confirm your subscription.");
}
// or else there was a data error,
// so you need to parse the error code.
else{
// Convert the error string from XML data to a string,
// then display it in the response text field.
var resultCode = result_xml.firstChild.childNodes[0].childNodes[0].toString();
_root.resetForm(resultCode);
}
}
// Set up a send XML object, even though we're not
// really sending anything in XML.
// All your data will be encoded in the send_url variable.
var send_xml:XML = new XML();
send_xml.ignoreWhite = true;
// Here's where your data is added.
// For additional text fields, add additional merge_vars
// array elements and append at the end.
var send_url:String = "http://api.mailchimp.com/1.1/?output=xml";
send_url += "&method=listSubscribe&apikey=" + apiKey;
send_url += "&id=" + listID + "&email_address=" + email;
send_url += "&merge_vars[FNAME]=" + firstName;
send_url += "&merge_vars[LNAME]=" + lastName;
// And here's how you send/load:
send_xml.sendAndLoad(send_url, result_xml);
}
// or else there's an issue with the email address
else{
// show the email error.
showErrors();
}
}
// validate an email address
function validEmail(inputEmail:String):Boolean
{
if (inputEmail.indexOf(" ")>0) {
return false;
}
var emailArray:Array=inputEmail.split("@");
if (emailArray.length != 2 || emailArray[0].length == 0 || emailArray[1].length ==0) {
return false;
}
var postArray:Array=emailArray[1].split(".");
if (postArray.length < 2) {
return false;
}
for (var i:Number=0; i<postArray.length; i++){
if (postArray[i].length < 1) {
return false;
}
}
var suffix=postArray[postArray.length-1];
if (suffix.length < 2 || suffix.length > 3) {
return false;
}
return true;
}
// delete all form elements and display a response message
function resetForm(pResponse){
submit_mc.enabled = true;
firstName_txt.text = "";
lastName_txt.text = "";
email_txt.text = "";
response_txt.text = pResponse;
Selection.setFocus("firstName_txt");
}
// select the email address and display an error message
function showErrors(){
Selection.setFocus("email_txt");
Selection.setSelection(0, email_txt.length);
response_txt.text = "Invalid email address.";
submit_mc.enabled = true;
}
Want to try it out? All you need to do to get it working is set up your MailChimp account and lists, then edit these variables:
_global.apiKey = "YOUR_MAILCHIMP_API_KEY";
_global.listID = "YOUR_MAILCHIMP_LIST_ID";
Then push your files online or test your SWF directly in the Flash Player (testing in a browser from your desktop may throw a Flash security error). You should be subscribing users in no time. Thanks again to the API team for working with me on this!