AJAX Mailchimp signup form integration

Question

Is there any way to integrate mailchimp simple  one email input  with AJAX  so there is no page refresh and no redirection to default mailchimp page   This solution doesn t work jQuery Ajax POST not working with MailChimp  Thanks

User · Answer

For anyone looking for a solution on a modern stack   import jsonp from  jsonp   import queryString from  query-string       formData being an object with your form data like       EMAIL   emailofyouruser gmail com     jsonp    YOURMAILCHIMP us10 list-manage com subscribe post-json u YOURMAILCHIMPU amp   queryString stringify formData       param   c      err  data    gt      console log err     console log data

User · Answer

Use jquery ajaxchimp plugin to achieve that  It s dead easy    lt form method  post  action  YOUR SUBSCRIBE URL HERE  gt     lt input type  text  name  EMAIL  placeholder  e-mail address    gt     lt input type  submit  name  subscribe  value  subscribe     gt             lt p class  result  gt  lt  p gt   lt  form gt    JavaScript     function          form   ajaxChimp       callback  function response             form  result   text response msg

User · Answer

Based on gbinflames  answer  this is what worked for me   Generate a simple mailchimp list sign up form   copy the action URL and method  post  to your custom form  Also rename your form field names to all capital   name  EMAIL  as in original mailchimp code  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   amp 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

User · Answer

As for this date  February 2017   it seems that mailchimp has integrated something similar to what gbinflames suggests into their own javascript generated form   You don t need any further intervention now as mailchimp will convert the form to an ajax submitted one when javascript is enabled   All you need to do now is just paste the generated form from the embed menu into your html page and NOT modify or add any other code   This simply works  Thanks MailChimp

User · Answer

You don t need an API key  all you have to do is plop the standard mailchimp generated form into your code   customize the look as needed   and in the forms  action  attribute change post u  to post-json u  and then at the end of the forms action append  amp c   to get around any cross domain issue  Also it s important to note that when you submit the form you must use GET rather than POST   Your form tag will look something like this by default    lt form action  http   xxxxx us  list-manage1 com subscribe post u xxxxx amp id xxxx  method  post       gt    change it to look something like this   lt form action  http   xxxxx us  list-manage1 com subscribe post-json u xxxxx amp id xxxx amp c    method  get       gt    Mail Chimp will return a json object containing 2 values   result  - this will indicate if the request was successful or not   I ve only ever seen 2 values   error  and  success    and  msg  - a message describing the result    I submit my forms with this bit of jQuery     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  gt  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

User · Answer

You should use the server-side code in order to secure your MailChimp account   The following is an updated version of this answer which uses PHP   The PHP files are  secured  on the server where the user never sees them yet the jQuery can still access  amp  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    lt  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    gt    GET  email             FNAME    gt    GET  fname              LNAME    gt    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- gt listSubscribe  list id    GET  email     merge vars     GET  emailtype        true               It worked             return  Success  amp nbsp  Check your inbox or spam folder for a message containing a confirmation link         else             An error ocurred  return error message            return   lt b gt Error  lt  b gt  amp nbsp       api- gt errorMessage               If being called via ajax  autorun the function if   GET  ajax     echo storeAddress        gt    4   Create your HTML CSS jQuery form   It is not required to be on a PHP page   Here is something like what my index html file looks like    lt form id  signup  action  index html  method  get  gt       lt input type  hidden  name  ajax  value  true    gt      First Name   lt input type  text  name  fname  id  fname    gt      Last Name   lt input type  text  name  lname  id  lname    gt      email Address  required    lt input type  email  name  email  id  email    gt      HTML   lt input type  radio  name  emailtype  value  html  checked  checked    gt      Text   lt input type  radio  name  emailtype  value  text    gt       lt input type  submit  id  SendButton  name  submit  value  Submit    gt   lt  form gt   lt div id  message  gt  lt  div gt    lt script src  jquery min js  type  text javascript  gt  lt  script gt   lt script type  text javascript  gt     document  ready function             signup   submit function                 message   html   lt span class  error  gt Adding your email address    lt  span gt               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               lt  script gt    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

User · Answer

In the other hand  there is some packages in AngularJS which are helpful  in AJAX WEB    https   github com cgarnier angular-mailchimp-subscribe

User · Answer

Based on gbinflames  answer  I kept the POST and URL  so that the form would continue to work for those with JS off     lt form class  myform  action  http   XXXXXXXXXlist-manage2 com subscribe post  method  POST  gt     lt input type  hidden  name  u  value  XXXXXXXXXXXXXXXX  gt     lt input type  hidden  name  id  value  XXXXXXXXX  gt     lt input class  input  type  text  value    name  MERGE1  placeholder  First Name  required gt     lt input type  submit  value  Send  name  submit  id  mc-embedded-subscribe  gt   lt  form gt    Then  using jQuery s  submit   changed the type  and URL to handle JSON repsonses       myform   submit function e      var  this     this       ajax         type   GET      GET  amp  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

[javascript] AJAX Mailchimp signup form integration

Examples related to javascript

Examples related to ajax

Examples related to forms

Examples related to mailchimp

[javascript] AJAX Mailchimp signup form integration

Examples related to javascript

Examples related to ajax

Examples related to forms

Examples related to newsletter

Examples related to mailchimp