Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
mailchimp ajax signup form example
<!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>
<?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.";
}
@pdquint
Copy link

pdquint commented Jun 17, 2013

@mfkp your code is not working ...

@surjithctly
Copy link

surjithctly commented Oct 16, 2013

I got the same error "You must specify a email_address value for the listSubscribe method"

Klaasie, Your Fix worked like a charm... Great!!

change $('#address').attr('value') to $('#address').val().

Admin, please add it to your code also.

@perminna
Copy link

perminna commented Feb 13, 2014

Thank you! Worked like a charm after the $('#address').attr('value') -&gt; $('#address').val() update.

@Cam
Copy link

Cam commented Mar 25, 2014

I too was having the issue where users are redirected to the PHP page on submit, rather than the AJAX live updating the page. Then a bit of debugging showed that I had simply failed to load ketchup. Easy to miss, but very important!

@ibrent
Copy link

ibrent commented Apr 17, 2014

Thanks. Yes it worked but I made four small but important changes:

  1. Made sure the "subscribe.php" file is in the right spot since that first slash ("/subscribe.php") of your form action will go to the top of the stack, yo. This is in the index.html file. I removed the slash to make it relative.
  2. Added the latest ketchup.js file which I downloaded from here:
    https://github.com/mustardamus/ketchup-plugin/downloads
  3. Fixed .val() code change listed above on line 25 of index.html
    $('#address').attr('value') should be changed to $('#address').val()
  4. Then I got this error in my browser console "event.returnValue is deprecated. Please use the standard event.preventDefault() instead.". And I was like, "say what??!!"
    For that fix, I simply made sure I was using the latest or a later version of Jquery:
    script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script

Boom. Bob's your uncle. Or that's how the saying goes at least. All works splendidly now. Rawk. Thank you all.

@prosenjeet
Copy link

prosenjeet commented Apr 21, 2014

The script works for me only that I had to remove the '/' before subscribe.php as suggested by ibrent above.
Is there any way we can make this system populate the First name, Last name and Country in mailchimp data?

@supriyaphalne
Copy link

supriyaphalne commented Oct 15, 2014

Hello,
Can anyone help me for this...this code is working fine when i am running it on localhost, and for online package it is working for homepage only....am I missing anything ,..please help me for this.

@fheo
Copy link

fheo commented Aug 24, 2015

ajax is not working. The page loads the php file instead of showing the message on the same page

@kamiuetian
Copy link

kamiuetian commented Oct 7, 2015

Hi, What i want to do is, Retrieve the email address at confirmation thankyou page?
How can I do that?

@SamiAibeche
Copy link

SamiAibeche commented Jun 28, 2016

Thank's for your help !

@jmccabeVA
Copy link

jmccabeVA commented Oct 17, 2016

Anyway to get this updated for the mail chimp v3 API? Also, would like to see example that on submit, can redirect to a URL. Just need email. I understand that changing mail chimp value from 'pending' to 'subscribed' will allow you to do single opt-in. Any help would be appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment