使用现有表单将数据发送到 mailchimp，然后重定向答案

【问题标题】：using an existing form to send data to mailchimp, then redirect使用现有表单将数据发送到 mailchimp，然后重定向
【发布时间】：2012-04-15 00:25:50
【问题描述】：

我没有经常使用我的 mailchimp，所以我想知道是否可以在不使用他们的预制模板的情况下轻松地将表单数据发送到 mailchimp。另外，mailchimp 会发送某种回调吗？我想提交表单，然后在完成后将用户重定向到下载页面。如果能全部在 ajax/jquery 中工作就更好了。

【问题讨论】：

标签： jquery mailchimp

【解决方案1】：

基本上，您在自己的自定义 HTML 表单上使用 jQuery ajax() 来访问与 MailChimp API 通信的 PHP 文件。 MailChimp 的响应通过 Ajax 返回到您的原始表单，因此没有重定向或刷新。但是，如果您想重定向，您只需更改您的 jQuery ajax 函数即可。

即使您不使用 PHP，它也很可能安装在您的服务器上。您的用户永远不会看到 PHP 文件；它们只是在后端使用。

Source: A SO answer I posted previously...

摸索了一会儿，我找到了一个使用 jQuery 的 PHP 示例的网站。由此我能够使用包含基本注册表单的 jQuery 创建一个简单的 HTML 页面。 PHP 文件被“隐藏”在后台，用户永远看不到它们，但 jQuery 仍然可以访问和使用。

1) 在此处下载 PHP 5 jQuery 示例...

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

如果您只有 PHP 4，只需下载 1.2 版的 MCAPI 并替换上面对应的MCAPI.class.php 文件。

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

2) 按照自述文件中的说明，将您的 API 密钥和列表 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 文件的样子：

<html>
<head>
    <title>Welcome</title>
    <style type="text/css" media="screen">
        body    { font-size: 16px; }
        input { font-size: 16px; }
        .textinput { width: 300px; height: 20px; }
        #message { color: #8e2c30; font-size: 15px; font-weight: bold; padding: 10px; border: solid 1px #6d6e70; }
    </style>
</head>
<body>
    <div style="width:550px;">
        <div style="text-align:right;">
        <b>Sign Up for the Newsletter:</b><br />
        <br />
            <form id="signup" action="index.html" method="get">
                First Name:&nbsp; <input type="text" name="fname" id="fname" class="textinput" value="" />
                            <br />
                Last Name:&nbsp; <input type="text" name="lname" id="lname" class="textinput" value="" />
                            <br />
            email Address (required):&nbsp; <input type="email" name="email" id="email" class="textinput" value="" />
                            <br />
            <input type="radio" name="emailtype" value="html" checked="checked">HTML&nbsp;&nbsp;<input type="radio" name="emailtype" value="text">Text&nbsp;&nbsp;<input type="radio" name="emailtype" value="mobile">Mobile Device<br />
            <br />
            <input type="submit" id="SendButton" name="submit" class="textinput" value="Submit" />
            </form>
        </div>
        <div id="message">
        </div>  
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var emailEntered,
            fnameVal,
            lnameVal,
            emailtypeVal;

        $(document).ready(function() {
            $("#SendButton").click(function() {
                    $(".error").hide();
                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                    var emailaddressVal = $("#email").val();

                    if(emailaddressVal == '') {
                        $("#message").html('<span class="error">Enter your email address before submitting.</span>');
                        return false; 
                    }
                    else if(!emailReg.test(emailaddressVal)) {
                        $("#message").html("<span class='error'>That is not an email address.&nbsp;  Typo?</span>");
                        return false; 
                    } 
                    else {
                        emailEntered = escape($('#email').val());
                    }

                    fnameVal        = escape($("#fname").val());
                    lnameVal        = escape($("#lname").val());
                    emailtypeVal    = $('input:radio[name=emailtype]:checked').val();

            });
            $('#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: 'ajax=true&email=' + emailEntered +'&fname=' + fnameVal + '&lname=' + lnameVal + '&emailtype=' + emailtypeVal,
                    success: function(msg) {
                        $('#message').html(msg);
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>

需要的部分...

index.html 构造如上或类似。使用 jQuery，外观和选项是无穷无尽的。
store-address.php 文件在 Mailchimp 网站上作为 PHP 示例的一部分下载，并使用您的 API KEY 和 LIST ID进行了修改>。您需要将其他可选字段添加到数组中。
MCAPI.class.php 文件从 Mailchimp 站点下载（PHP 5 版本 1.3 或 PHP 4 版本 1.2）。将它放在与您的 store-address.php 相同的目录中，或者您必须更新 store-address.php 中的 url 路径以便它可以找到它。

【讨论】：