2012-03-31 15 views
3

メールチップを使っていないので、フォームデータをメールテンプレートに簡単に送信できるかどうかは不思議です。また、mailchimpは何らかのコールバックを送信するでしょうか?私はフォームを提出してから、ユーザーがダウンロードページにリダイレクトされるようにしたいと思っています。それがすべてajax/jqueryで動作することができればさらに良いでしょう。既存のフォームを使用してmailchimpにデータを送信してからリダイレクト

答えて

3

基本的に、独自のカスタム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は、単に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)ユーザーの名前やその他の情報を収集することもできます。対応するMerge Variablesを使用して、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のフォームを作成します。ここでは

は私store-address.phpファイルは、私も姓、名、メールアドレスの種類が集まるように見えるものです。 PHPページに入れる必要はありません。

上記または類似のように構成さ
<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-\.][email protected]([\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を:ここ

    は私index.htmlファイルは次のようになります。 jQueryでは、外観とオプションは無限です。

  • ストアaddress.phpファイルMailchimpサイト上のPHPの例の一部としてダウンロードし、お使いのAPI KEYLISTのIDで改変。あなたは配列にあなたの他のオプションのフィールドを追加する必要があります。

  • MCAPI.class.php Mailchimpサイト(PHP 5用のバージョン1.3またはPHP 4用のバージョン1.2)からダウンロードされたファイル。あなたのストアaddress.phpと同じディレクトリに配置します。または、ストアaddress.php内のURLパスを更新する必要がありますので、それを見つけることができます。

関連する問題