Intégration du formulaire D'inscription AJAX Mailchimp

basé sur la réponse de gbinflames, j'ai gardé le POST et L'URL, de sorte que la forme continuerait à fonctionner pour ceux avec JS off.

<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>

puis, en utilisant jQuery .submit () a changé le type, et L'URL pour gérer JSON repson.

$('.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;
});

Vous devrait utiliser le code côté serveur afin de sécuriser votre compte MailChimp.

ce qui suit est une version mise à jour de cette réponse qui utilise PHP :

les fichiers PHP sont" sécurisés " sur le serveur où l'utilisateur ne les voit jamais et où le jQuery peut encore y accéder et les utiliser.

1) Téléchargez L'exemple PHP 5 jQuery ici...

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

si vous n'avez que PHP 4, Téléchargez simplement la version 1.2 du MCAPI et remplacez le fichier MCAPI.class.php ci-dessus.

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

2) suivez les instructions du fichier Readme en ajoutant votre clé API et votre ID de liste au fichier store-address.php à les emplacements appropriés.

3) Vous pouvez également recueillir vos utilisateurs nom et/ou d'autres informations. Vous devez ajouter un tableau au fichier store-address.php en utilisant les Variables de fusion correspondantes.

voici à quoi ressemble mon fichier store-address.php où je saisis aussi le prénom, le nom de famille et le type de courriel:

<?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'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->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) créez votre formulaire HTML/CSS/jQuery. Il n'est pas obligatoire d'être sur une page PHP.

voici quelque chose comme ce à quoi ressemble mon fichier index.html :

<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>

pièces requises...

• index.html construit comme ci-dessus ou similaire. Avec jQuery, l'apparence et les options sont infinies.

• banque-adresse.php fichier téléchargé dans le cadre de PHP exemples sur Mailchimp site et modifié avec votre API KEY et LIST ID . Vous devez ajouter vos autres champs optionnels au tableau.

• MCAPI.classe.fichier php Téléchargé du site Mailchimp (version 1.3 Pour PHP 5 ou version 1.2 Pour PHP 4). Placez-le dans le même répertoire que votre adresse .php ou vous devez mettre à jour le chemin d'url dans magasin adresse.php , donc il peut le trouver.

basé sur la réponse de gbinflames, c'est ce qui a fonctionné pour moi:

génère un simple formulaire d'inscription mailchimp list, copie L'URL de l'action et la méthode (post) à votre formulaire personnalisé. Renommez aussi vos noms de champs de formulaire en majuscules (nom= 'EMAIL' comme dans le code original mailchimp, EMAIL, FNAME, LNAME,... ), puis utilisez ceci:

      $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...
          }
      }

Utiliser jquery.ajaxchimp plugin pour y parvenir. C'est tellement facile!

<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);
    }
  });
})

en ce qui concerne cette date (février 2017), il semble que mailchimp ait intégré quelque chose de similaire à ce que gbinflames suggère dans sa propre forme générée par javascript.

vous n'avez pas besoin d'autre intervention maintenant que mailchimp convertira le formulaire en un ajax soumis lorsque javascript est activé.

tout ce que vous devez faire maintenant est simplement coller le formulaire généré à partir du menu intégré dans votre page html et ne pas modifier ou ajouter tout autre code.

cela fonctionne tout simplement. Merci MailChimp!

pour quiconque recherche une solution sur une pile moderne:

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&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

d'un autre côté, il y a des paquets à AngularJS qui sont utiles (dans AJAX WEB):

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