Интеграция формы регистрации AJAX Mailchimp - PullRequest
112 голосов
/ 08 декабря 2011

Есть ли способ интегрировать mailchimp simple (один ввод по электронной почте) с AJAX, чтобы не было обновления страницы и перенаправления на страницу mailchimp по умолчанию.

Это решение не работает JQuery Ajax POST не работает с MailChimp

Спасибо

Ответы [ 8 ]

221 голосов
/ 27 февраля 2013

Вам не нужен ключ API, все, что вам нужно сделать, это вставить стандартную форму, сгенерированную mailchimp, в ваш код (настроить внешний вид по мере необходимости) и в атрибуте "action" формы изменить post?u= на post-json?u=а затем в конце действия формы добавьте &c=?, чтобы обойти любую междоменную проблему.Также важно отметить, что когда вы отправляете форму, вы должны использовать GET, а не POST.

По умолчанию ваш тег формы будет выглядеть примерно так:

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

измените его на что-токак это

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

Mail Chimp вернет объект json, содержащий 2 значения: «результат» - это будет указывать, был ли запрос успешным или нет (я только когда-либо видел 2 значения, «ошибка» и«success») и «msg» - сообщение, описывающее результат.

Я отправляю свои формы с этим битом 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...
            }
        }
    });
}
31 голосов
/ 23 апреля 2013

Основываясь на ответе gbinflames, я сохранил POST и URL, чтобы форма продолжала работать для тех, у кого 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>

Затем с помощью jSumit .submit () изменили тип и URL для обработки ответов 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 голосов
/ 28 февраля 2013

Вы должны использовать код на стороне сервера для защиты своей учетной записи MailChimp.

Ниже приводится обновленная версия этого ответа, в котором используется PHP :

PHP-файлы «защищены» на сервере, где пользователь их никогда не видит, но jQuery все еще может получить к ним доступ и использовать.

1) Скачать пример PHP 5 jQuery здесь ...

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

Если у вас есть только PHP 4, просто загрузите MCAPI версии 1.2 и замените соответствующий MCAPI.class.php файл выше.

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

2) Следуйте инструкциям в файле Readme, добавив ключ API и идентификатор списка в файл store-address.php в соответствующих местах.

3) Возможно, вы также захотите собрать имя вашего пользователя и / или другую информацию. Вы должны добавить массив в файл store-address.php, используя соответствующие переменные слияния.

Вот как выглядит мой store-address.php файл, где я также собираю имя, фамилию и тип электронной почты:

<?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) Создайте форму HTML / CSS / jQuery. Не обязательно быть на странице PHP.

Вот как выглядит мой 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>

Требуется штук ...

  • index.html , построенный, как указано выше, или аналогичный. С jQuery внешний вид и опции бесконечны.

  • store-address.php , загруженный как часть примеров PHP на сайт Mailchimp и измененный с помощью API KEY и LIST ID . Вам нужно добавить другие дополнительные поля в массив.

  • MCAPI.class.php файл, загруженный с сайта Mailchimp (версия 1.3 для PHP 5 или версия 1.2 для PHP 4). Поместите его в тот же каталог, что и ваш store-address.php , или вы должны обновить путь URL в store-address.php , чтобы он мог его найти.

6 голосов
/ 30 августа 2013

Исходя из ответа gbinflames, это то, что у меня сработало:

Создайте простую форму регистрации в списке mailchimp, скопируйте URL-адрес действия и метод (post) в свою пользовательскую форму. Также переименуйте имена полей формы во все прописные (name = 'EMAIL', как в исходном коде mailchimp, EMAIL, FNAME, LNAME, ...), затем используйте это:

      $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...
          }
      }
4 голосов
/ 30 мая 2018

Для тех, кто ищет решение для современного стека:

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);
});
4 голосов
/ 02 февраля 2017

Что касается этой даты (февраль 2017 года), то, похоже, что mailchimp интегрировал нечто похожее на то, что предлагает gbinflames, в свою собственную сгенерированную форму JavaScript.

Вам больше не нужно больше вмешиваться, так как mailchimp преобразует форму в ajax, отправленный при включении javascript.

Все, что вам нужно сделать сейчас, это просто вставить сгенерированную форму из меню встраивания в вашу HTML-страницу и НЕ изменять или добавлять любой другой код.

Это просто работает. Спасибо MailChimp!

4 голосов
/ 30 мая 2014

Используйте плагин jquery.ajaxchimp для этого. Это очень просто!

<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);
    }
  });
})
0 голосов
/ 30 мая 2017

С другой стороны, в AngularJS есть несколько полезных пакетов (в AJAX WEB):

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

...