Integrasi formulir pendaftaran AJAX Mailchimp

Apakah ada cara untuk mengintegrasikan mailchimp sederhana (satu input email) dengan AJAX, sehingga tidak ada penyegaran halaman dan tidak ada pengalihan ke halaman default mailchimp.

Solusi ini tidak berfungsi jQuery Ajax POST tidak berfungsi dengan MailChimp

Terima kasih

Anda tidak memerlukan kunci API, yang harus Anda lakukan adalah memasukkan formulir yang dibuat oleh mailchimp standar ke dalam kode Anda (sesuaikan tampilan sesuai kebutuhan) dan dalam bentuk "tindakan" berubah post?u=menjadi atribut post-json?u=dan kemudian di akhir tindakan formulir tambahkan &c=?untuk mengatasi masalah lintas domain. Juga penting untuk dicatat bahwa ketika Anda mengirimkan formulir, Anda harus menggunakan GET daripada POST.

Tag formulir Anda akan terlihat seperti ini secara default:

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

ubah agar terlihat seperti ini

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

Mail Chimp akan mengembalikan objek json yang berisi 2 nilai: 'result' - ini akan menunjukkan apakah permintaan tersebut berhasil atau tidak (saya hanya pernah melihat 2 nilai, "error" dan "success") dan 'msg' - sebuah pesan mendeskripsikan hasilnya.

Saya mengirimkan formulir saya dengan sedikit jQuery ini:

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

Berdasarkan jawaban gbinflames, saya menyimpan POST dan URL, sehingga formulir akan terus berfungsi untuk mereka yang JS nonaktif.

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

Kemudian, menggunakan .submit () jQuery mengubah jenisnya, dan URL untuk menangani tanggapan 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;
});

Anda harus menggunakan kode sisi server untuk mengamankan akun MailChimp Anda.

Berikut ini adalah versi terbaru dari jawaban ini yang menggunakan PHP :

File PHP "diamankan" di server di mana pengguna tidak pernah melihatnya namun jQuery masih dapat mengakses & menggunakan.

1) Unduh contoh jQuery PHP 5 di sini ...

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

Jika Anda hanya memiliki PHP 4, cukup unduh MCAPI versi 1.2 dan ganti MCAPI.class.phpfile yang sesuai di atas.

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

2) Ikuti petunjuk di file Readme dengan menambahkan kunci API dan ID Daftar Anda ke store-address.phpfile di lokasi yang tepat.

3) Anda mungkin juga ingin mengumpulkan nama pengguna Anda dan / atau informasi lainnya. Anda harus menambahkan array ke store-address.phpfile menggunakan Merge Variables yang sesuai.

Ini adalah store-address.phptampilan file saya di mana saya juga mengumpulkan nama depan, nama belakang, dan jenis email:

<?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) Buat formulir HTML / CSS / jQuery Anda. Itu tidak harus berada di halaman PHP.

Berikut adalah index.htmltampilan file saya :

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

Potongan yang dibutuhkan ...

• index.html dibuat seperti di atas atau serupa. Dengan jQuery, tampilan dan opsinya tidak terbatas.

• file store-address.php diunduh sebagai bagian dari contoh PHP di situs Mailchimp dan dimodifikasi dengan KUNCI API dan ID DAFTAR Anda . Anda perlu menambahkan bidang opsional lainnya ke larik.

• File MCAPI.class.php diunduh dari situs Mailchimp (versi 1.3 untuk PHP 5 atau versi 1.2 untuk PHP 4). Letakkan di direktori yang sama dengan store-address.php Anda atau Anda harus memperbarui jalur url di dalam store-address.php agar dapat menemukannya.

Untuk siapa pun yang mencari solusi pada tumpukan modern:

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

Berdasarkan jawaban gbinflames, inilah yang berhasil untuk saya:

Buat formulir pendaftaran mailchimp list sederhana, salin URL tindakan dan metode (posting) ke formulir kustom Anda. Juga ganti nama kolom formulir Anda menjadi semua kapital (name = 'EMAIL' seperti pada kode mailchimp asli, EMAIL, FNAME, LNAME, ...), kemudian gunakan ini:

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

Adapun tanggal ini (Februari 2017), tampaknya mailchimp telah mengintegrasikan sesuatu yang mirip dengan apa yang disarankan gbinflames ke dalam formulir yang dibuat javascript mereka sendiri.

Anda tidak memerlukan intervensi lebih lanjut sekarang karena mailchimp akan mengubah formulir menjadi formulir yang dikirimkan ajax ketika javascript diaktifkan.

Yang perlu Anda lakukan sekarang hanyalah menempelkan formulir yang dihasilkan dari menu sematan ke halaman html Anda dan BUKAN mengubah atau menambahkan kode lain.

Ini bekerja dengan mudah. Terima kasih MailChimp!

Gunakan plugin jquery.ajaxchimp untuk melakukannya. Sangat mudah!

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

Di sisi lain, ada beberapa paket di AngularJS yang berguna (di AJAX WEB):

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