AJAX Mailchimp 가입 양식 통합

mailchimp simple (하나의 이메일 입력)을 AJAX와 통합하는 방법이 있습니까? 따라서 페이지 새로 고침이없고 기본 mailchimp 페이지로 리디렉션되지 않습니다.

이 솔루션은 MailChimp에서 작동하지 않는 jQuery Ajax POST가 작동 하지 않습니다.

감사

API 키가 필요하지 않습니다. 표준 mailchimp 생성 양식을 코드에 넣고 (필요에 따라 모양을 사용자 지정) 양식에서 "action"속성을 변경 한 다음 양식 작업의 끝에서 변경 post?u=하면됩니다. 도메인 간 문제를 해결하려면 post-json?u=추가하십시오 &c=?. 또한 양식을 제출할 때 POST가 아닌 GET을 사용해야한다는 점에 유의해야합니다.

양식 태그는 기본적으로 다음과 같습니다.

<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는 2 개의 값을 포함하는 json 객체를 반환합니다 : 'result'-요청이 성공했는지 여부를 나타냅니다 ( "error"및 "success"의 2 개 값만 보았습니다) 및 '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...
            }
        }
    });
}

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>

그런 다음 jQuery의 .submit ()을 사용하여 JSON 응답을 처리 할 유형과 URL을 변경했습니다.

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

당신은 해야 당신의 메일 침프 계정을 확보하기 위해 서버 측 코드를 사용합니다.

다음은 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) store-address.php적절한 위치 의 파일에 API 키와 목록 ID를 추가하여 Readme 파일의 지침을 따릅니다 .

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 파일은 Mailchimp 사이트에서 PHP 예제의 일부로 다운로드되고 API KEY 및 LIST ID로 수정됩니다 . 다른 선택적 필드를 배열에 추가해야합니다.

• Mailchimp 사이트에서 다운로드 한 MCAPI.class.php 파일 (PHP 5 용 버전 1.3 또는 PHP 4 용 버전 1.2). 귀하와 같은 디렉토리에 배치 매장 address.php 또는 당신은 내 URL 경로 업데이트해야합니다 매장 address.php을 그것을 찾을 수 있습니다.

최신 스택에서 솔루션을 찾는 모든 사람 :

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

gbinflames의 답변에 따르면 이것은 나를 위해 일한 것입니다.

간단한 mailchimp 목록 가입 양식을 생성하고 작업 URL 및 방법 (게시)을 사용자 지정 양식에 복사합니다. 또한 양식 필드 이름을 모두 대문자 (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...
          }
      }

이 날짜 (2017 년 2 월)에 관해서는 mailchimp가 gbinflames가 제안하는 것과 유사한 것을 자체 자바 스크립트 생성 양식에 통합 한 것으로 보입니다.

javascript가 활성화되면 mailchimp가 양식을 ajax 제출 양식으로 변환하므로 더 이상 개입 할 필요가 없습니다.

이제 필요한 것은 임베드 메뉴에서 생성 된 양식을 html 페이지에 붙여넣고 다른 코드를 수정하거나 추가하지 않는 것입니다.

이것은 단순히 작동합니다. 감사합니다 MailChimp!

이를 위해 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>

자바 스크립트 :

$(function() {
  $('form').ajaxChimp({
    callback: function(response) {
      $('form .result').text(response.msg);
    }
  });
})

반면 AngularJS에는 유용한 패키지가 있습니다 (AJAX WEB에서) :

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