AJAX Mailchimp formulaire d'inscription à l'intégration

Vous n'avez pas besoin d'une clé API, tout ce que vous avez à faire est de plop la norme mailchimp formulaire généré dans votre code ( pour personnaliser le look que nécessaire ) et dans les formes attribut "action" changer post?u= à post-json?u= et puis à la fin de l'formes d'action ajouter &c=? de contourner des croix de domaine en question. Aussi il est important de noter que lorsque vous soumettez le formulaire, vous devez utiliser plutôt que de POSTER.

Votre balise de formulaire va ressembler à quelque chose comme ceci par défaut:

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

changer pour ressembler à quelque chose comme ceci

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

Mail Chimp sera de retour un objet json contenant 2 valeurs: 'résultat' - cela permettra d'indiquer si la demande a été acceptée ou non ( je n'ai jamais vu les 2 valeurs "erreur" et le "succès" ) et 'msg' - un message décrivant le résultat.

- Je soumettre mes formulaires avec ce peu 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...
            }
        }
    });
}

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 "garantis" sur le serveur où l'utilisateur ne les voit encore le jQuery pouvez toujours accéder à & utiliser.

1) Télécharger le PHP 5, jQuery exemple ici...

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

Si vous n'avez que PHP 4, il suffit de télécharger la version 1.2 de l'MCAPI et remplacer le correspondant MCAPI.class.php fichier ci-dessus.

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

2) Suivez les instructions dans le fichier Lisezmoi en ajoutant votre clé API et l'ID de la Liste de la store-address.php fichier à l'endroit approprié.

3) Vous pouvez également recueillir vos utilisateurs nom et/ou d'autres informations. Vous devez ajouter un tableau à la store-address.php fichier à l'aide de la correspondante de Variables de Fusion.

Voici ce que ma store-address.php fichier ressemble à celui où j'ai aussi de recueillir les nom, prénom et e-mail de type:

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

Ici est quelque chose comme ce que mon index.html fichier ressemble à ceci:

<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 similaires. Avec jQuery, l'apparence et les options sont infinies.

• store-address.php fichier téléchargé dans le cadre de PHP exemples sur Mailchimp site et modifié avec votre CLÉ API et ID de la LISTE. Vous devez ajouter votre autre option champs de la matrice.

• MCAPI.class.php fichier téléchargé à partir de Mailchimp site (la version 1.3 de PHP 5 ou version 1.2 pour PHP 4). Le placer dans le même répertoire que votre store-address.php ou vous devez mettre à jour le chemin de l'url à l'intérieur de store-address.php de sorte qu'il peut trouver.

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

Pour ceux qui recherchent une solution moderne de la pile:

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