AJAX Mailchimp registration form integration

Question

Is there a way to integrate mailchimp simple (one email input) with AJAX, so there is no default page refresh and redirect to the mailchimp page.

This solution does not work jQuery Ajax POST does not work with MailChimp

thank

Answer 1

You do not need an API key, all you need to do is insert the standard form created using mailchimp into your code (if necessary, customize the appearance) and change the "action" attribute of the post?u= form to post-json?u= and then at the end of the form action add &c=? to get around any cross-domain issue. It is also important to note that when submitting a form, you should use GET, not POST.

Your form tag will look something like this:

 <form action="http://xxxxx.us#.list-manage1.com/subscribe/post?u=xxxxx&id=xxxx" method="post" ... > 

change it to look something like this.

 <form action="http://xxxxx.us#.list-manage1.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="get" ... > 

Mail Chimp will return a json object containing 2 values: "result" - this will indicate whether the request was successful or not (I saw only 2 values, "error" and "success") and "msg" - a message describing the result.

I submit my forms with this jQuery bit:

 $(document).ready( function () { // I only have one form on the page but you can be more specific if need be. var $form = $('form'); if ( $form.length > 0 ) { $('form input[type="submit"]').bind('click', function ( event ) { if ( event ) event.preventDefault(); // validate_input() is a validation function I wrote, you'll have to substitute this with your own. if ( validate_input($form) ) { register($form); } }); } }); function register($form) { $.ajax({ type: $form.attr('method'), url: $form.attr('action'), data: $form.serialize(), cache : false, dataType : 'json', contentType: "application/json; charset=utf-8", error : function(err) { alert("Could not connect to the registration server. Please try again later."); }, success : function(data) { if (data.result != "success") { // Something went wrong, do something to notify the user. maybe alert(data.msg); } else { // It worked, carry on... } } }); } 

Answer 2

Based on gbinflames answer, I saved POST and URLs so that the form continues to work for those who have JS disabled.

 <form class="myform" action="http://XXXXXXXXXlist-manage2.com/subscribe/post" method="POST"> <input type="hidden" name="u" value="XXXXXXXXXXXXXXXX"> <input type="hidden" name="id" value="XXXXXXXXX"> <input class="input" type="text" value="" name="MERGE1" placeholder="First Name" required> <input type="submit" value="Send" name="submit" id="mc-embedded-subscribe"> </form> 

Then, using jQuery.submit (), changed the type and URL to handle JSON replicas.

 $('.myform').submit(function(e) { var $this = $(this); $.ajax({ type: "GET", // GET & url for json slightly different url: "http://XXXXXXXX.list-manage2.com/subscribe/post-json?c=?", data: $this.serialize(), dataType : 'json', contentType: "application/json; charset=utf-8", error : function(err) { alert("Could not connect to the registration server."); }, success : function(data) { if (data.result != "success") { // Something went wrong, parse data.msg string and display message } else { // It worked, so hide form and display thank-you message. } } }); return false; }); 

Answer 3

You must use server-side code to protect your MailChimp account.

Below is an updated version of this answer that uses PHP :

PHP files are "protected" on a server where the user never sees them, but jQuery can still use and use.

1) Download the PHP 5 jQuery example here ...

http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.zip

If you have only PHP 4, just download MCAPI version 1.2 and replace the corresponding MCAPI.class.php file above.

http://apidocs.mailchimp.com/downloads/mailchimp-api-class-1-2.zip

2) Follow the instructions in the Readme file by adding the API key and list identifier to the store-address.php in the appropriate places.

3) You may also want to collect a username and / or other information. You must add the array to the store-address.php file using the appropriate Merge variables.

This is what my store-address.php file looks like, where I also collect 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 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!&nbsp; Check your inbox or spam folder for a message containing a confirmation link.'; }else{ // An error ocurred, return error message return '<b>Error:</b>&nbsp; ' . $api->errorMessage; } } // If being called via ajax, autorun the function if($_GET['ajax']){ echo storeAddress(); } ?> 

4) Create your HTML / CSS / jQuery form. This does not have to be on a PHP page.

Here is something like my index.html file:

 <form id="signup" action="index.html" method="get"> <input type="hidden" name="ajax" value="true" /> First Name: <input type="text" name="fname" id="fname" /> Last Name: <input type="text" name="lname" id="lname" /> email Address (required): <input type="email" name="email" id="email" /> HTML: <input type="radio" name="emailtype" value="html" checked="checked" /> Text: <input type="radio" name="emailtype" value="text" /> <input type="submit" id="SendButton" name="submit" value="Submit" /> </form> <div id="message"></div> <script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#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: $('#signup').serialize(), success: function(msg) { $('#message').html(msg); } }); return false; }); }); </script> 

Required Fragments ...

• index.html , built both above and similar. With jQuery, the look and feel are endless.

• store-address.php file downloaded as part of the PHP examples at the Mailchimp website and modified using the KEY API and LIST ID . You need to add other additional fields to the array.

• The MCAPI.class.php file downloaded from the Mailchimp website (version 1.3 for PHP 5 or version 1.2 for PHP 4). Put it in the same directory as your store-address.php , or you must update the url in store-address.php so that it can find it.

Answer 4

Based on gbinflames answer, this is what worked for me:

Create a simple mailing list registration form, copy the action URL and method (message) into your own form. Also rename the form field names to all capital (name = 'EMAIL', as in the source code of mailchimp, EMAIL, FNAME, LNAME, ...), then use this:

  $form=$('#your-subscribe-form'); // use any lookup method at your convenience $.ajax({ type: $form.attr('method'), url: $form.attr('action').replace('/post?', '/post-json?').concat('&c=?'), data: $form.serialize(), timeout: 5000, // Set timeout value, 5 seconds cache : false, dataType : 'jsonp', contentType: "application/json; charset=utf-8", error : function(err) { // put user friendly connection error message }, success : function(data) { if (data.result != "success") { // mailchimp returned error, check data.msg } else { // It worked, carry on... } } 

Answer 5

Use jquery.ajaxchimp for this. He is dead easily!

 <form method="post" action="YOUR_SUBSCRIBE_URL_HERE"> <input type="text" name="EMAIL" placeholder="e-mail address" /> <input type="submit" name="subscribe" value="subscribe!" /> <p class="result"></p> </form> 

JavaScript:

 $(function() { $('form').ajaxChimp({ callback: function(response) { $('form .result').text(response.msg); } }); }) 

Answer 6

Regarding this date (February 2017), it seems that mailchimp has integrated something similar to what gbinflames offers into its own generated javascript form.

Now you do not need any further intervention, since mailchimp will convert the form to the one submitted by ajax when javascript is enabled.

All you have to do is just paste the generated form from the embeddable menu into your html page and DO NOT modify or not add any other code.

It just works. Thanks MailChimp!

Answer 7

AngularJS, on the other hand, has some packages that are useful (in AJAX WEB):

https://github.com/cgarnier/angular-mailchimp-subscribe