Integracja formularza rejestracji AJAX Mailchimp


122

Czy istnieje sposób na prostą integrację mailchimp (jedno wejście e-mail) z AJAX, tak aby nie było odświeżania strony ani przekierowania do domyślnej strony mailchimp.

To rozwiązanie nie działa jQuery Ajax POST nie działa z MailChimp

Dzięki


po przesłaniu formularza przekierowuje do strony "potwierdź" mailchimp.
alexndm

3
Twoje rozwiązanie ma ogromną lukę w zabezpieczeniach, klucz API powinien być traktowany jako prywatny, ponieważ zapewnia pełny dostęp do konta MailChimp. #justsaying

1
To rozwiązanie ujawnia API mailchimp, co nie jest dobrym pomysłem
Ruairi Browne

3
Czy domyślna opcja osadzania HTML na stronie mailchimp nie ujawnia również twojego klucza API? Nie może być lepiej ani gorzej niż to rozwiązanie.
Bob Bobbio

Użyj tej wtyczki jquery: github.com/scdoshi/jquery-ajaxchimp
sid

Odpowiedzi:


241

Nie potrzebujesz klucza API, wszystko, co musisz zrobić, to umieścić standardowy formularz wygenerowany przez mailchimp w swoim kodzie (dostosuj wygląd do potrzeb) i zmienić atrybut „action” w formularzu post?u=na, post-json?u=a następnie na końcu formularza akcja append, &c=?aby obejść każdy problem między domenami. Należy również pamiętać, że przesyłając formularz, należy użyć funkcji GET, a nie POST.

Twój tag formularza będzie domyślnie wyglądał mniej więcej tak:

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

zmień to, aby wyglądało mniej więcej tak

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

Mail Chimp zwróci obiekt json zawierający 2 wartości: „wynik” - to wskaże, czy żądanie się powiodło, czy nie (widziałem tylko 2 wartości, „błąd” i „sukces”) oraz „msg” - wiadomość opisanie wyniku.

Przesyłam swoje formularze za pomocą tego fragmentu 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
Zrobiłem wtyczkę jquery, która używa tej metody: github.com/scdoshi/jquery-ajaxchimp
sid

22
Możesz także użyć JSONP. Użyj post-jsonzgodnie z opisem. Usuń, &c=jeśli masz to w formularzu action url. Użyj dataType: 'jsonp'i jsonp: 'c'dla swojego wywołania jQuery ajax.
czerasz

5
Pamiętaj, że pola formularza e-mail muszą mieć nazwę = "EMAIL", aby mailchimp mógł przetworzyć
Ian Warner,

5
Po prostu do Twojej wiadomości na wypadek, gdyby ktoś miał problemy, nazwa parametru wiadomości e-mail powinna być EMAIL( wielkie litery). W przeciwnym razie pojawi się błąd z informacją, że adres e-mail jest pusty.
Nick Tiberi

5
Czy MailChimp wyłączył tę metodę dostępu do API od czasu napisania tej odpowiedzi? Nie widziałem w dokumentacji żadnej wskazówki, że GET / POST bez klucza API może subskrybować użytkownika do listy.
Greg Bell

34

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życie metody .submit () jQuery zmieniło typ i adres URL w celu obsługi odpowiedzi 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

Państwo powinno 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 może nadal uzyskiwać 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, po prostu pobierz wersję 1.2 MCAPI i zamień odpowiedni MCAPI.class.phpplik powyżej.

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

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

3) Możesz także chcieć zebrać nazwy użytkowników i / lub inne informacje. Musisz dodać tablicę do store-address.phppliku, używając odpowiednich zmiennych scalających.

Oto, store-address.phpjak wygląda mój plik, w którym zbieram również imię, nazwisko i typ adresu 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) Utwórz formularz HTML / CSS / jQuery. Nie jest wymagane, aby znajdować się na stronie PHP.

Oto coś takiego, jak index.htmlwygląda mój plik:

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

  • index.html skonstruowana jak powyżej lub podobnie. Dzięki jQuery wygląd i opcje są nieograniczone.

  • store-address.php pobrany jako część przykładów PHP na stronie Mailchimp i zmodyfikowany za pomocą klucza API i identyfikatora LISTY . Musisz dodać inne opcjonalne pola do tablicy.

  • Plik MCAPI.class.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 zaktualizuj ścieżkę url w store-address.php, aby mógł go znaleźć.


2
Jeśli chcesz tylko dodać formularz rejestracyjny do swojej witryny i przesłać go przez AJAX, odpowiedź @ gbinflames działa. Właśnie tego spróbowałem.
Patrick Canfield,

1
Nie, nie ma takiej konieczności .
Nowaker

2
Cholera, muszę powiedzieć - jakiś czas temu zaimplementowałem odpowiedź @ skube na stronie, a później dodałem https dla całej witryny. Właśnie odkryłem, że nie działa z wywołaniem http AJAX mailchimp. Zdecydowanie zalecamy skorzystanie z tej metody od razu, jeśli witryna może kiedykolwiek potrzebować lub rozważać użycie SSL.
squarecandy

12

Dla każdego, kto szuka rozwiązania na nowoczesny stos:

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

Opierając się na odpowiedzi gbinflames, to działa dla mnie:

Wygeneruj prosty formularz rejestracji listy mailchimp, skopiuj adres URL akcji i metodę (post) do formularza niestandardowego. Zmień również nazwy pól formularza na wielkie litery (nazwa = 'EMAIL' jak w oryginalnym kodzie mailchimp, EMAIL, FNAME, LNAME, ...), a 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...
          }
      }

5

Jeśli chodzi o tę datę (luty 2017), wydaje się, ż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 skonwertuje formularz do formularza AJAX, gdy włączony jest javascript.

Teraz wystarczy wkleić wygenerowany formularz z menu embed na swoją stronę html i NIE modyfikować ani nie dodawać żadnego innego kodu.

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


4
Naprawdę pomoże, jeśli możesz dodać link do artykułu / posty na blogu, aby zrobić to samo
gonephishing

Dodałem kod osadzania Mailchimp do mojej strony HTML, ale Ajax nie działa automatycznie, jak sugerowano powyżej. Zostałem przekierowany na inną stronę. Jak mogę to zrobić bez przekierowania?
Petra

1
W panelu administracyjnym MailChimp przejdź do swojej listy -> Formularze rejestracji -> Formularze osadzone -> Klasyczny. Zobaczysz, że fragment kodu zawiera kod JS. Umożliwi to walidację formularza i przesyłanie AJAX.
MarcGuay

1
używając kodu mailchimp - jak podłączyć niestandardową akcję do sukcesu AJAX? [jak ukrycie formularza]
Adeer jak

1
@Masiorama Zdecydowałem się na usunięcie skryptu mc-validate, ponieważ zawierał on również stare jquery i był zbyt duży i podatny na ataki. więc wystarczy walidacja html i przesłanie za pomocą
Ajax,

4

Aby to osiągnąć, użyj wtyczki jquery.ajaxchimp . To bardzo łatwe!

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.