Integracja formularza rejestracyjnego AJAX Mailchimp

Bazując na odpowiedzi gbinflames, zachowałem POST i URL, aby formularz nadal działał dla osób z wyłączonym JS.

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

Następnie, używając jQuery .submit() zmienił typ i adres URL do obsługi repsonów 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;
});

Powinieneśużyć kodu po stronie serwera, aby zabezpieczyć swoje konto MailChimp.

Poniżej znajduje się zaktualizowana wersja tej odpowiedzi, która używa PHP :

Pliki PHP są "zabezpieczone" na serwerze, na którym użytkownik nigdy ich nie widzi, ale jQuery nadal może uzyskać dostęp i używać.

1) Pobierz przykład PHP 5 jQuery tutaj...

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

Jeśli masz tylko PHP 4, wystarczy pobrać wersję 1.2 MCAPI i zastąpić odpowiedni plik MCAPI.class.php powyżej.

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

2) postępuj zgodnie ze wskazówkami w pliku Readme, dodając swój klucz API i identyfikator listy do pliku store-address.php w odpowiednich lokalizacjach.

3) Możesz również chcieć zebrać nazwę użytkownika i / lub inne informacje. Musisz dodać tablicę do pliku store-address.php używając odpowiedniego scalenia Zmienne.

Oto jak wygląda mój plik store-address.php, w którym zbieram również imię, nazwisko i typ e-maila:

<?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) Utwórz swój formularz HTML / CSS / jQuery. Nie jest wymagane, aby znajdować się na stronie PHP.

Oto jak wygląda mój plik 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>

wymagane elementy...

• indeks.html skonstruowany jak wyżej lub podobny. Z jQuery, wygląd i opcje są niekończące się.

• adres sklepu.php plik pobrany jako część przykładów PHP na stronie Mailchimp i zmodyfikowany za pomocą klucza API i LIST ID . Musisz dodać inne opcjonalne pola do tablicy.

• MCAPI.klasy.plik PHP pobrany ze strony Mailchimp (Wersja 1.3 Dla PHP 5 lub Wersja 1.2 Dla PHP 4). Umieść go w tym samym katalogu co twój store-address.php lub musisz zaktualizować ścieżkę url w adres sklepu.php więc może go znaleźć.

Bazując na odpowiedzi gbinflamesa, to mi się udało:

Wygeneruj prosty formularz rejestracji listy mailchimp, skopiuj adres URL akcji i metodę (post) do niestandardowego formularza. Zmień również nazwy pól formularza na wszystkie duże (nazwa = "e-mail" jak w oryginalnym kodzie mailchimp, e-mail, FNAME, LNAME,... ), następnie użyj tego:

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

Użyj jquery.ajaxchimp plugin do tego celu. To ŚMIERTELNIE PROSTE!

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

Jeśli chodzi o tę datę (luty 2017), wygląda na to, że mailchimp zintegrował coś podobnego do tego, co sugeruje gbinflames w swoim własnym formularzu generowanym przez javascript.

Nie potrzebujesz teraz żadnej dalszej interwencji, ponieważ mailchimp przekonwertuje formularz NA przesłany ajax, gdy włączony jest javascript.

Wszystko, co musisz teraz zrobić, to wkleić wygenerowany formularz z menu osadzania na stronie html i nie modyfikować ani nie dodawać żadnego innego kodu.

To po prostu działa. Dzięki. MailChimp!

Dla każdego, kto szuka rozwiązania na nowoczesnym stosie:

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

Z drugiej strony w AngularJS jest kilka pakietów, które są pomocne (w AJAX WEB):

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