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

问题描述:

我没有使用我的mailchimp,所以我想知道是否可以轻松地将表单数据发送到mailchimp而不使用他们的预制模板。另外,mailchimp会发送某种回调吗?我希望提交表单,然后在完成后将用户重定向到下载页面。如果它可以在ajax / jquery中工作会更好。

I haven't worked with my mailchimp a whole lot, so I'm wondering if it was possible to easily send form data to mailchimp without using their premade templates. Also, will mailchimp send a callback of some sort? I want to have form submitted then when finished it would redirect the user to a download page. It would be even better if it could all work in ajax/jquery.

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

Basically, you use jQuery ajax() on your own custom HTML form to access PHP files which communicate with the MailChimp API. The responses from MailChimp come back to your original form via Ajax so there's no redirect or refresh. However, if you want to redirect, you'd simply alter your jQuery ajax function to do so.

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

Even if you don't use PHP, it's most likely installed on your server. Your users will never see the PHP files; they're just being used in the back end.

来源:我之前发布的一个SO答案......

在摸索了一段时间之后,我找到了一个使用PHP的网站使用jQuery的例子。从那以后我就可以使用包含基本注册表单的jQuery创建一个简单的HTML页面。 PHP文件在后台隐藏,用户从未看到它们,但jQuery仍然可以访问&使用。

After fumbling around for a while, I found a site using the PHP example with jQuery. From that I was able to create a simple HTML page with jQuery containing the basic sign-up form. The PHP files are "hidden" in the background where the user never sees them yet the jQuery can still access & use.

1)在这里下载PHP 5 jQuery示例...

1) Download the PHP 5 jQuery example here...

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

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

If you only have PHP 4, simply download version 1.2 of the MCAPI and replace the corresponding MCAPI.class.php file above.

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

2)按照自述文件中的说明,将API密钥和列表ID添加到适当位置的 store-address.php 文件中。

2) Follow the directions in the Readme file by adding your API key and List ID to the store-address.php file at the proper locations.

3)您可能还想收集用户的姓名和/或其他信息。您必须使用相应的合并变量将数组添加到 store-address.php 文件中。

3) You may also want to gather your users' name and/or other information. You have to add an array to the store-address.php file using the corresponding Merge Variables.

这是我的 store-address.php 文件看起来像我在哪里收集名字,姓氏和电子邮件类型:

Here is what my store-address.php file looks like where I also gather the first name, last name, and email type:

<?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页面上。

4) Create your HTML/CSS/jQuery form. It is not required to be on a PHP page.

这是我的 index.html 文件的样子:

Here is what my index.html file looks like:

<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,外观和选项是无穷无尽的。

  • index.html constructed as above or similar. With jQuery, the appearance and options are endless.

store-address.php 文件作为PHP示例的一部分在Mailchimp网站上下载并使用 API KEY LIST ID 进行修改。您需要将其他可选字段添加到数组中。

store-address.php file downloaded as part of PHP examples on Mailchimp site and modified with your API KEY and LIST ID. You need to add your other optional fields to the array.

从Mailchimp网站下载的MCAPI.class.php 文件(版本1.3)适用于PHP 5或适用于PHP 4的1.2版)。将它放在与 store-address.php 相同的目录中,或者您必须更新 store-address.php 中的网址路径,以便找到它。

MCAPI.class.php file downloaded from Mailchimp site (version 1.3 for PHP 5 or version 1.2 for PHP 4). Place it in the same directory as your store-address.php or you must update the url path within store-address.php so it can find it.