Intégration du formulaire d'inscription AJAX Mailchimp

Existe-t-il un moyen d'intégrer mailchimp simple (une entrée d'e-mail) avec AJAX, donc il n'y a pas d'actualisation de page et pas de redirection vers la page mailchimp par défaut.

Cette solution ne fonctionne pas jQuery Ajax POST ne fonctionne pas avec MailChimp

Merci

Vous n'avez pas besoin d'une clé API, tout ce que vous avez à faire est d'insérer le formulaire standard généré par mailchimp dans votre code (personnaliser l'apparence si nécessaire) et dans les formulaires, le changement d'attribut "action" post?u=vers post-json?u=et ensuite à la fin de l'action des formulaires ajouter &c=?pour contourner tout problème interdomaine. Il est également important de noter que lorsque vous soumettez le formulaire, vous devez utiliser GET plutôt que POST.

Votre balise de formulaire ressemblera à ceci par défaut:

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

changez-le pour qu'il ressemble à quelque chose comme ça

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

Mail Chimp retournera un objet json contenant 2 valeurs: 'result' - cela indiquera si la requête a réussi ou non (je n'ai jamais vu que 2 valeurs, "error" et "success") et 'msg' - un message décrivant le résultat.

Je soumets mes formulaires avec ce bit de 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 > 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...
            }
        }
    });
}

Sur la base de la réponse de gbinflames, j'ai gardé le POST et l'URL, de sorte que le formulaire continue à fonctionner pour ceux avec JS désactivé.

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

Ensuite, l'utilisation de .submit () de jQuery a changé le type et l'URL pour gérer les réponses JSON.

$('.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 devez 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 mais le jQuery peut toujours accéder et utiliser.

1) Téléchargez l'exemple de 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 MCAPI.class.phpfichier correspondant ci-dessus.

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

2) Suivez les instructions du fichier Lisez-moi en ajoutant votre clé API et votre ID de liste au store-address.phpfichier aux emplacements appropriés.

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

Voici à quoi store-address.phpressemble mon fichier où je rassemble également le prénom, le nom et le type d'e-mail:

<?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 nécessaire qu'il soit sur une page PHP.

Voici à quoi ressemble mon index.htmlfichier:

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

• fichier store-address.php téléchargé dans le cadre d'exemples PHP sur le site Mailchimp et modifié avec votre clé API et votre identifiant de liste . Vous devez ajouter vos autres champs facultatifs au tableau.

• Fichier MCAPI.class.php téléchargé depuis le 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 store-address.php ou vous devez mettre à jour le chemin de l'url dans store-address.php pour qu'il puisse le trouver.

Pour tous ceux qui recherchent 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: '[email protected]' }

jsonp(`//YOURMAILCHIMP.us10.list-manage.com/subscribe/post-json?u=YOURMAILCHIMPU&${queryString.stringify(formData)}`, { param: 'c' }, (err, data) => {
  console.log(err);
  console.log(data);
});

Basé sur la réponse de gbinflames, voici ce qui a fonctionné pour moi:

Générez un simple formulaire d'inscription à la liste mailchimp, copiez l'URL d'action et la méthode (publication) dans votre formulaire personnalisé. Renommez également vos noms de champs de formulaire en majuscules (nom = 'EMAIL' comme dans le code mailchimp d'origine, 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...
          }
      }

Quant à cette date (février 2017), il semble que mailchimp ait intégré quelque chose de similaire à ce que suggère gbinflames dans leur propre formulaire généré par javascript.

Vous n'avez besoin d'aucune autre intervention maintenant car mailchimp convertira le formulaire en un formulaire soumis par ajax lorsque javascript est activé.

Tout ce que vous avez à faire maintenant est simplement de coller le formulaire généré à partir du menu d'intégration dans votre page html et de NE PAS modifier ou ajouter un autre code.

Cela fonctionne simplement. Merci MailChimp!

Utilisez le plugin jquery.ajaxchimp pour y parvenir. C'est très simple!

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

D'autre part, il existe des packages dans AngularJS qui sont utiles (dans AJAX WEB):

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