注册表单集成

有没有什么方法可以将 mailchimp simple (一个 email 输入)与 AJAX 集成在一起,这样就不会刷新页面,也不会重定向到默认的 mailchimp 页面。

这个解决方案不起作用

谢谢

142566 次浏览

你不需要一个 API 密钥,你所要做的就是将标准的 mailchmp 生成的表单放入你的代码中(根据需要自定义外观) ,然后在表单的“ 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 对象: ‘ result’-这将指示请求是否成功(我只看到过两个值,“ error”和“ 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...
}
}
});
}

应该使用服务器端代码保护 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)按照自述文件中的说明,将 API 密钥和 List ID 添加到 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>

需要的零件。

  • 使用 jQuery,外观和选项是无穷无尽的。

  • Store-address.PHP 文件作为 Mailchimp 站点上 PHP 示例的一部分下载,并使用 API 键名单 ID进行修改。您需要将其他可选字段添加到数组中。

  • 从 Mailchimp 网站下载的 MCAPI.class.PHP 文件(PHP 5版本1.3或 PHP 4版本1.2)。将它放在与 商店地址相同的目录中,否则必须更新 商店地址中的 URL 路径,以便它能够找到它。

基于 gbflames 的回答,我保留了 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 的. mit ()更改了类型,并更改了处理 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;
});

基于 gbflames 的回答,这是对我起作用的:

生成一个简单的 mailchimp 列表注册表单,将操作 URL 和方法(post)复制到自定义表单。还要将表单字段名重命名为所有大写字母(name = “ EM aIL”,如原始 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...
}
}

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

至于这个日期(2017年2月) ,邮猩猩似乎已经将类似于 gbflames 建议的东西整合到他们自己的 javascript 生成形式中。

现在您不需要任何进一步的干预,因为当启用 javascript 时,mailchimp 会将表单转换为一个 Ajax 提交的表单。

现在你所需要做的就是将嵌入菜单中生成的表单粘贴到 html 页面中,不要修改或添加任何其他代码。

这个简单的工作。感谢邮猩猩!

另一方面,AngularJS 中有一些软件包是有帮助的(在 AJAXWEB 中) :

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

对于那些在现代堆栈上寻找解决方案的人来说:

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

我无法在 捡回来中实现这个功能,所以必须在这里使用 GET 和解析表单输入将一些答案组合到 URL 的查询字符串中。它也没有必要为 name的输入是 EMAIL,但我想它使它更易读,不破坏代码(在这个简单的情况下。如果有其他表单字段,可以进行操作)。

这是我的密码

<form action="https://me.usxx.list-manage.com/subscribe/post-json?" id="signup" method="GET">
<input type="hidden" name="u" value="xxxxxxxxxxxxxxxxxx"/>
<input type="hidden" name="id" value="xxxxxxxxx"/>
<input type="hidden" name="c" value="?"/>
<input name="EMAIL" type="text" />
</form>
// Form submission handler
const formData = new FormData(signup);


fetch(signup.action + new URLSearchParams(formData).toString(), {
mode: 'no-cors',
method: signup.method,
})
.then((res) => {
// Success
})
.catch((e) => {
// Error
})

你可以让它变得不那么友好。

<form action="https://me.usxx.list-manage.com/subscribe/post" id="signup">
fetch(signup.action + '-json?' + new URLSearchParams(formData).toString(), {

为了挽救那些像我一样笨手笨脚的人,你必须为 Mailchimp 的观众创建一个注册表格,通过访问 那个页面,你可以得到你的 u值、 id值和 action值。也许这只是我的想法,但我认为这并不明确。

这个 Github 代码非常适合我。这里有如何使用它的详细说明。我用它在我的 WP 网站。这里是链接- Https://gist.github.com/dmitriyrf/34f659dbbc02637cf7465e2efdd37ef5