Intégration d'un formulaire d'inscription Mailchimp en AJAX

Question

Existe-t-il un moyen d'intégrer mailchimp simple (une entrée d'email) avec AJAX, de sorte qu'il n'y ait pas de rafraîchissement 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

Answer 1

Vous n'avez pas besoin d'une clé API, tout ce que vous avez à faire est de placer le formulaire standard généré par mailchimp dans votre code (personnalisez l'apparence selon vos besoins) et dans l'attribut "action" du formulaire, changez post?u= à post-json?u= et ensuite à la fin de l'action du formulaire ajouter &c=? pour contourner les problèmes liés aux domaines croisés. 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 ceci

<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' - ceci 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 bout 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...
            }
        }
    });
}

Answer 2

En me basant sur la réponse de gbinflames, j'ai conservé le POST et l'URL, afin que le formulaire continue de fonctionner pour les personnes dont le JS est 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 la fonction .submit() de jQuery a permis de modifier 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;
});

Answer 3

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 jQuery peut toujours 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 de l'interface MCAPI et remplacez les fichiers MCAPI.class.php fichier 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 à l'adresse suivante store-address.php aux endroits appropriés.

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

Voici ce que mon store-address.php où je recueille également le prénom, le nom de famille et le type d'email :

<?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 quelque chose comme ce que mon index.html ressemble à un fichier :

<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 nécessaires...

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

• adresse du magasin.php téléchargé dans le cadre des exemples PHP sur le site de Mailchimp et modifié avec votre fichier CLÉ API et ID LIST . Vous devez ajouter vos autres champs facultatifs au tableau.

• MCAPI.class.php téléchargé sur le site de 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 du magasin.php ou vous devez mettre à jour le chemin url dans adresse du magasin.php pour qu'il puisse le trouver.

Answer 4

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

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

Answer 5

Utilisez jquery.ajaxchimp pour y parvenir. C'est très 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);
    }
  });
})