Integration des AJAX Mailchimp-Anmeldeformulars

Gibt es eine Möglichkeit, Mailchimp einfach (eine E-Mail-Eingabe) in AJAX zu integrieren, sodass keine Seitenaktualisierung und keine Umleitung zur Standard-Mailchimp-Seite erfolgt?

Diese Lösung funktioniert nicht. JQuery Ajax POST funktioniert nicht mit MailChimp

Vielen Dank

Sie benötigen keinen API-Schlüssel. Sie müssen lediglich das von Mailchimp generierte Standardformular in Ihren Code einfügen (das Erscheinungsbild nach Bedarf anpassen) und in den Attributen "Aktion" des Formulars post?u=in post-json?u=und dann am Ende der Formularaktion ändern anhängen &c=?, um domänenübergreifende Probleme zu umgehen . Beachten Sie auch, dass Sie beim Absenden des Formulars GET anstelle von POST verwenden müssen.

Ihr Formular-Tag sieht standardmäßig ungefähr so ​​aus:

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

ändere es so, dass es ungefähr so ​​aussieht

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

Mail Chimp gibt ein JSON-Objekt zurück, das 2 Werte enthält: 'result' - Dies zeigt an, ob die Anforderung erfolgreich war oder nicht (ich habe bisher nur 2 Werte gesehen, "error" und "success") und 'msg' - eine Nachricht das Ergebnis beschreiben.

Ich reiche meine Formulare mit diesem Stück jQuery ein:

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

Basierend auf der Antwort von gbinflames habe ich den POST und die URL beibehalten, damit das Formular für Benutzer mit deaktiviertem JS weiterhin funktioniert.

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

Durch die Verwendung von .submit () von jQuery wurden dann der Typ und die URL geändert, um JSON-Antworten zu verarbeiten.

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

Sie sollten den serverseitigen Code verwenden, um Ihr MailChimp-Konto zu sichern.

Das Folgende ist eine aktualisierte Version dieser Antwort, die PHP verwendet :

Die PHP-Dateien sind auf dem Server "gesichert", auf dem der Benutzer sie noch nie sieht. Die jQuery kann weiterhin darauf zugreifen und sie verwenden.

1) Laden Sie hier das PHP 5 jQuery-Beispiel herunter ...

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

Wenn Sie nur PHP 4 haben, laden Sie einfach Version 1.2 des MCAPI herunter und ersetzen Sie die entsprechende MCAPI.class.phpDatei oben.

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

2) Befolgen Sie die Anweisungen in der Readme-Datei, indem Sie der store-address.phpDatei an den richtigen Stellen Ihren API-Schlüssel und Ihre Listen-ID hinzufügen .

3) Möglicherweise möchten Sie auch den Namen Ihrer Benutzer und / oder andere Informationen erfassen. Sie müssen der store-address.phpDatei ein Array mit den entsprechenden Zusammenführungsvariablen hinzufügen .

So store-address.phpsieht meine Datei aus, in der ich auch den Vornamen, den Nachnamen und den E-Mail-Typ erfahre:

<?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) Erstellen Sie Ihr HTML / CSS / jQuery-Formular. Es ist nicht erforderlich, sich auf einer PHP-Seite zu befinden.

So index.htmlsieht meine Datei aus:

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

Erforderliche Stücke ...

• index.html wie oben oder ähnlich aufgebaut. Mit jQuery sind das Erscheinungsbild und die Optionen endlos.

• store-address.php Datei als Teil von PHP Beispiele auf Mailchimp Website und modifiziert mit heruntergeladenen API KEY und LIST - ID . Sie müssen dem Array Ihre anderen optionalen Felder hinzufügen.

• MCAPI.class.php Datei heruntergeladen von Mailchimp Website (Version 1.3 für PHP 5 oder Version 1.2 für PHP 4). Platzieren Sie es im selben Verzeichnis wie Ihre store-address.php, oder Sie müssen den URL-Pfad in store-address.php aktualisieren, damit es gefunden werden kann.

Für alle, die eine Lösung für einen modernen Stack suchen:

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

Basierend auf der Antwort von gbinflames hat dies für mich funktioniert:

Generieren Sie ein einfaches Anmeldeformular für die Mailchimp-Liste, kopieren Sie die Aktions-URL und die Methode (Post) in Ihr benutzerdefiniertes Formular. Benennen Sie auch Ihre Formularfeldnamen in Großbuchstaben um (name = 'EMAIL' wie im ursprünglichen Mailchimp-Code, EMAIL, FNAME, LNAME, ...) und verwenden Sie dann Folgendes:

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

Für dieses Datum (Februar 2017) scheint mailchimp etwas Ähnliches wie das, was gbinflames vorschlägt, in ihre eigene, von Javascript generierte Form integriert zu haben.

Sie brauchen jetzt keine weiteren Eingriffe, da mailchimp das Formular in ein von Ajax übermitteltes Formular konvertiert, wenn Javascript aktiviert ist.

Alles, was Sie jetzt tun müssen, ist, das generierte Formular aus dem Einbettungsmenü in Ihre HTML-Seite einzufügen und KEINEN anderen Code zu ändern oder hinzuzufügen.

Das funktioniert einfach. Danke MailChimp!

Verwenden Sie dazu das Plugin jquery.ajaxchimp . Es ist ganz einfach!

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

Andererseits gibt es in AngularJS einige Pakete, die hilfreich sind (in AJAX WEB):

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