<!DOCTYPE html> <html> <head> <title>Example ajax/jsonp MailChimp subscribe form</title> </head> <body> <!-- To use this example: 1. Download this html file 2. Replace the form action url with your own from the MailChimp supplied embed code 3. Within the action url, replace "subscribe/post" with "subscribe/post-json" 4. Be sure the action url starts with http://. If it doesn't, the form will hang when testing the html as a local file in your browser. 5. Open this file in a browser on your local machine --> <form id="subscribe-form" action="http://yourlist.us6.list-manage.com/subscribe/post-json?u=bbbaafd1d12345c57b712345&id=123456789e" method="get"> <h3>Want more great content delivered to your inbox?</h3> <p>(no spam ever, unsubscribe at any time)</p> <div> <input type="email" placeholder="email *" value="" name="EMAIL" > <input type="text" placeholder="first name" value="" name="FNAME"> </div> <div> <input type="submit" value="Keep Me Updated" name="subscribe"> </div> <div id="subscribe-result"> </div> </form> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result")); // Turn the given MailChimp form into an ajax version of it. // If resultElement is given, the subscribe result is set as html to // that element. function ajaxMailChimpForm($form, $resultElement){ // Hijack the submission. We'll submit the form manually. $form.submit(function(e) { e.preventDefault(); if (!isValidEmail($form)) { var error = "A valid email address must be provided."; $resultElement.html(error); $resultElement.css("color", "red"); } else { $resultElement.css("color", "black"); $resultElement.html("Subscribing..."); submitSubscribeForm($form, $resultElement); } }); } // Validate the email address in the form function isValidEmail($form) { // If email is empty, show error message. // contains just one @ var email = $form.find("input[type='email']").val(); if (!email || !email.length) { return false; } else if (email.indexOf("@") == -1) { return false; } return true; } // Submit the form with an ajax/jsonp request. // Based on http://stackoverflow.com/a/15120409/215821 function submitSubscribeForm($form, $resultElement) { $.ajax({ type: "GET", url: $form.attr("action"), data: $form.serialize(), cache: false, dataType: "jsonp", jsonp: "c", // trigger MailChimp to return a JSONP response contentType: "application/json; charset=utf-8", error: function(error){ // According to jquery docs, this is never called for cross-domain JSONP requests }, success: function(data){ if (data.result != "success") { var message = data.msg || "Sorry. Unable to subscribe. Please try again later."; $resultElement.css("color", "red"); if (data.msg && data.msg.indexOf("already subscribed") >= 0) { message = "You're already subscribed. Thank you."; $resultElement.css("color", "black"); } $resultElement.html(message); } else { $resultElement.css("color", "black"); $resultElement.html("Thank you!<br>You must confirm the subscription in your inbox."); } } }); } }); </script> </body> </html>