I haven't worked with my mailchimp a whole lot, so I'm wondering if it was possible to easily send form data to mailchimp without using their premade templates. Also, will mailchimp send a callback of some sort? I want to have form submitted then when finished it would redirect the user to a download page. It would be even better if it could all work in ajax/jquery.
Asked
Active
Viewed 8,909 times
1 Answers
3
Basically, you use jQuery ajax() on your own custom HTML form to access PHP files which communicate with the MailChimp API. The responses from MailChimp come back to your original form via Ajax so there's no redirect or refresh. However, if you want to redirect, you'd simply alter your jQuery ajax function to do so.
Even if you don't use PHP, it's most likely installed on your server. Your users will never see the PHP files; they're just being used in the back end.
Source: A SO answer I posted previously...
After fumbling around for a while, I found a site using the PHP example with jQuery. From that I was able to create a simple HTML page with jQuery containing the basic sign-up form. The PHP files are "hidden" in the background where the user never sees them yet the jQuery can still access & use.
1) Download the PHP 5 jQuery example here...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip
If you only have PHP 4, simply download version 1.2 of the MCAPI and replace the corresponding MCAPI.class.php file above.
http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip
2) Follow the directions in the Readme file by adding your API key and List ID to the store-address.php file at the proper locations.
3) You may also want to gather your users' name and/or other information. You have to add an array to the store-address.php file using the corresponding Merge Variables.
Here is what my store-address.php file looks like where I also gather 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's 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']) === true) {
// It worked!
return 'Success! Check your inbox or spam folder for a message containing a confirmation link.';
}else{
// An error ocurred, return error message
return '<b>Error:</b> ' . $api->errorMessage;
}
}
// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>
4) Create your HTML/CSS/jQuery form. It is not required to be on a PHP page.
Here is what my index.html file looks like:
<html>
<head>
<title>Welcome</title>
<style type="text/css" media="screen">
body { font-size: 16px; }
input { font-size: 16px; }
.textinput { width: 300px; height: 20px; }
#message { color: #8e2c30; font-size: 15px; font-weight: bold; padding: 10px; border: solid 1px #6d6e70; }
</style>
</head>
<body>
<div style="width:550px;">
<div style="text-align:right;">
<b>Sign Up for the Newsletter:</b><br />
<br />
<form id="signup" action="index.html" method="get">
First Name: <input type="text" name="fname" id="fname" class="textinput" value="" />
<br />
Last Name: <input type="text" name="lname" id="lname" class="textinput" value="" />
<br />
email Address (required): <input type="email" name="email" id="email" class="textinput" value="" />
<br />
<input type="radio" name="emailtype" value="html" checked="checked">HTML <input type="radio" name="emailtype" value="text">Text <input type="radio" name="emailtype" value="mobile">Mobile Device<br />
<br />
<input type="submit" id="SendButton" name="submit" class="textinput" value="Submit" />
</form>
</div>
<div id="message">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var emailEntered,
fnameVal,
lnameVal,
emailtypeVal;
$(document).ready(function() {
$("#SendButton").click(function() {
$(".error").hide();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $("#email").val();
if(emailaddressVal == '') {
$("#message").html('<span class="error">Enter your email address before submitting.</span>');
return false;
}
else if(!emailReg.test(emailaddressVal)) {
$("#message").html("<span class='error'>That is not an email address. Typo?</span>");
return false;
}
else {
emailEntered = escape($('#email').val());
}
fnameVal = escape($("#fname").val());
lnameVal = escape($("#lname").val());
emailtypeVal = $('input:radio[name=emailtype]:checked').val();
});
$('#signup').submit(function() {
$("#message").html("<span class='error'>Adding your email address...</span>");
$.ajax({
url: 'inc/store-address.php', // proper url to your "store-address.php" file
data: 'ajax=true&email=' + emailEntered +'&fname=' + fnameVal + '&lname=' + lnameVal + '&emailtype=' + emailtypeVal,
success: function(msg) {
$('#message').html(msg);
}
});
return false;
});
});
</script>
</body>
</html>
Required pieces...
index.html constructed as above or similar. With jQuery, the appearance and options are endless.
store-address.php file downloaded as part of PHP examples on Mailchimp site and modified with your API KEY and LIST ID. You need to add your other optional fields to the array.
MCAPI.class.php file downloaded from Mailchimp site (version 1.3 for PHP 5 or version 1.2 for PHP 4). Place it in the same directory as your store-address.php or you must update the url path within store-address.php so it can find it.
