AJAX Intégration du formulaire d'inscription Mailchimp
Existe-t-il un moyen d’intégrer mailchimp simple (une entrée de courrier électronique) avec AJAX, de sorte qu’il n’y ait ni actualisation de page ni 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é d'API, vous n'avez qu'à insérer le formulaire standard généré par mailchimp dans votre code (personnaliser l'apparence selon vos besoins) et dans l'attribut "action" de formulaire, change post?u= à post-json?u= puis à la fin de l'action sur les formulaires append &c=? pour résoudre tout problème de domaine. De plus, il est important de noter que lorsque vous soumettez le formulaire, vous devez utiliser GET plutôt que POST.
Votre balise de formulaire ressemblera à 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 ç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: 'résultat' - cela indiquera si la requête a abouti ou non (je n'ai jamais vu que 2 valeurs, "erreur" et "succès") et "msg" - un message décrivant le résultat.
Je soumets mes formulaires avec ce morceau 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 de fonctionner pour ceux dont 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 .submit () de jQuery a modifié le type et l’URL permettant de 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 devriez 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 accéder et utiliser.
1) Téléchargez le PHP 5 exemple jQuery ici ...
http://apidocs.mailchimp.com/downloads/mcapi-simple-subscribe-jquery.Zip
Si vous ne possédez que PHP 4, téléchargez simplement la version 1.2 de MCAPI et remplacez le fichier MCAPI.class.php 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 fichier store-address.php Aux emplacements appropriés.
3) Vous pouvez également souhaiter recueillir le nom de vos utilisateurs et/ou d’autres informations. Vous devez ajouter un tableau au fichier store-address.php À l'aide des variables de fusion correspondantes.
Voici à quoi ressemble mon fichier store-address.php Où je rassemble également le prénom, le nom et le type de courrier électronique:
<?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! Check your inbox or spam folder for a message containing a confirmation link.';
}else{
// An error ocurred, return error message
return '<b>Error:</b> ' . $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 d’être sur une page PHP.
Voici à 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.
store-address.php fichier téléchargé dans le cadre de PHP sur le site Mailchimp et modifié avec votre CLÉ API et ID LISTE. Vous devez ajouter vos autres champs facultatifs au tableau.
MCAPI.class.php Fichier téléchargé à partir 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 store-address.php ou vous devez mettre à jour le chemin de l'URL dans store-address.php afin qu'il puisse le trouver.
D'après la réponse de gbinflames, voici ce qui a fonctionné pour moi:
Générez un formulaire d’inscription mailchimp simple, copiez l’URL de l’action et la méthode (post) dans votre formulaire personnalisé. Renommez également les noms de vos champs de formulaire en majuscules (name = '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...
}
}
Pour 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);
});
Utilisez le plugin 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);
}
});
})
En ce qui concerne cette date (février 2017), il semble que mailchimp ait intégré quelque chose de similaire à ce que suggère gbinflames dans son propre formulaire généré par javascript.
Vous n'avez besoin d'aucune autre intervention maintenant car mailchimp convertira le formulaire en un formulaire ajax soumis lorsque le javascript est activé.
Tout ce que vous avez à faire maintenant est simplement de coller le formulaire généré à partir du menu incorporé dans votre page html et de NE PAS modifier ou ajouter d’autres codes.
Cela fonctionne simplement. Merci MailChimp!
D'autre part, il y a quelques paquets dans AngularJS qui sont utiles (dans AJAX WEB):