seblavoie
12/17/2011 - 1:39 AM

mailchimp ajax signup form example

mailchimp ajax signup form example

subscribe.php
content_copyfile_download
<?php
$apiKey = 'your-api-key';
$listId = 'your-list-id';
$double_optin=false;
$send_welcome=false;
$email_type = 'html';
$email = $_POST['email'];
//replace us2 with your actual datacenter
$submit_url = "http://us2.api.mailchimp.com/1.3/?method=listSubscribe";
$data = array(
    'email_address'=>$email,
    'apikey'=>$apiKey,
    'id' => $listId,
    'double_optin' => $double_optin,
    'send_welcome' => $send_welcome,
    'email_type' => $email_type
);
$payload = json_encode($data);
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $submit_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, urlencode($payload));
 
$result = curl_exec($ch);
curl_close ($ch);
$data = json_decode($result);
if ($data->error){
    echo $data->error;
} else {
    echo "Got it, you've been added to our email list.";
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="jquery.ketchup.all.min.js" type="text/javascript"></script>
</head>
<body>
		<div id="email">
			<span>Enter your email to sign up</span>
			<form action="/subscribe.php" id="invite" method="POST">
				<input type="text" placeholder="your@email.com" name="email" id="address" data-validate="validate(required, email)"/>
				<button type="submit">&#187;</button>
			</form>
			<span id="result"></span>
		</div>
<script type="text/javascript">
$(document).ready(function() {
	$('#invite').ketchup().submit(function() {
		if ($(this).ketchup('isValid')) {
			var action = $(this).attr('action');
			$.ajax({
				url: action,
				type: 'POST',
				data: {
					email: $('#address').attr('value')
				},
				success: function(data){
					$('#result').html(data).css('color', 'green');
				},
				error: function() {
					$('#result').html('Sorry, an error occurred.').css('color', 'red');
				}
			});
		}
		return false;
	});
});
</script>
</body>
</html>