Intégration du formulaire d'inscription AJAX Mailchimp


122

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


après avoir soumis le formulaire, il redirige vers la page de confirmation de mailchimp.
alexndm

3
votre solution a un énorme trou de sécurité, la clé API doit être traitée comme privée car elle fournit un accès complet à votre compte MailChimp. #justsaying

1
Cette solution expose votre API mailchimp, ce qui n'est pas une bonne idée
Ruairi Browne

3
L'option d'intégration HTML par défaut sur le site Web de mailchimp expose-t-elle également votre clé API? Cela ne peut pas être meilleur ou pire que cette solution.
Bob Bobbio

Utilisez ce plugin jquery: github.com/scdoshi/jquery-ajaxchimp
sid

Réponses:


241

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

8
J'ai fait un jquery-plugin qui utilise cette méthode: github.com/scdoshi/jquery-ajaxchimp
sid

22
Vous pouvez également utiliser JSONP. Utilisez le post-jsoncomme décrit. Supprimez le &c=si vous l'avez dans l'URL d'action du formulaire. Utilisez dataType: 'jsonp'et jsonp: 'c'pour votre appel jQuery ajax.
czerasz

5
Notez que les champs du formulaire de courrier électronique doivent avoir name = "EMAIL" pour que mailchimp puisse être traité
Ian Warner

5
Juste pour info, au cas où quelqu'un aurait des problèmes, le nom du paramètre de courrier électronique devrait être EMAIL(en majuscules). Sinon, vous obtiendrez une erreur indiquant que l'adresse e-mail est vide.
Nick Tiberi

5
MailChimp a-t-il désactivé cette méthode d'accès à l'API depuis que cette réponse a été écrite? Je n'ai vu aucune indication dans la documentation qu'un GET / POST sans la clé API peut abonner un utilisateur à une liste.
Greg Bell

34

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

18

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.


2
Si vous souhaitez simplement ajouter un formulaire d'inscription à votre site et le soumettre via AJAX, la réponse de @ gbinflames fonctionne. Je l'ai juste essayé moi-même.
Patrick Canfield

1
Non, il n'y a pas de must .
Nowaker

2
Merde, je dois dire - j'ai implémenté la réponse de @ skube il y a quelque temps sur un site, puis j'ai ajouté plus tard des https à l'échelle du site. Je viens de découvrir maintenant que cela ne fonctionne pas avec l'appel http AJAX de mailchimp. Je recommande vivement d'utiliser cette méthode dès le départ si votre site pourrait avoir besoin ou envisager d'utiliser SSL.
squarecandy

12

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

6

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

5

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!


4
Cela vous aidera vraiment si vous pouvez ajouter des liens d'article / articles de blog pour faire de même
Gophishing

J'ai ajouté du code d'intégration Mailchimp dans ma page html mais Ajax ne fonctionne pas automatiquement comme suggéré ci-dessus. Je suis redirigé vers une autre page. Comment puis-je faire fonctionner cela sans redirection?
Petra

1
Dans l'administration MailChimp, accédez à votre liste -> Formulaires d'inscription -> Formulaires intégrés -> Classique. Vous verrez que certains JS sont inclus dans l'extrait de code. Cela permettra la validation du formulaire et la soumission AJAX.
MarcGuay

1
en utilisant le code mailchimp - comment connecter une action personnalisée au succès ajax? [comme cacher le formulaire]
Adeerlike

1
@Masiorama J'ai opté pour la suppression du script mc-validate, car il contenait également une ancienne jquery et était trop gros et vulnérable. donc juste avoir la validation html et la soumission avec ajax comme dans stackoverflow.com/a/15120409/744690
Adeerlike

4

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.