メールフォームプラグインV1.20（その11・メールフォームのAjax化）

メールフォームプラグインでは、メールフォームをAjax化して、ページ遷移が起こらないようにすることもできます。
今日はその方法を解説します。

1.prototype.jsのインストール

メールフォームのAjax化では、prototype.jsを利用します。
こちらのページからprototype.jsをダウンロードし、Blogの出力先ディレクトリにアップロードします。

2.メールフォームテンプレートのヘッダー部分の書き換え

次に、メールフォームのテンプレートのヘッダー部分（<head>～</head>）に、以下を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript">
<!--
function mail_ajax(mode)
{
    $("send_status").style.display = 'block';
    document.mail_form.mail_preview.disabled = true;
    document.mail_form.mail_post.disabled = true;
    var params = Form.serialize("mail_form");
    if (mode == "post") {
        params += "&mail_post=1";
    }
    else if (mode == "preview") {
        params += "&mail_preview=1";
    }

    new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",
                     { method : "post",
                       parameters : params,
                       onComplete : displayMailResult,
                       onFailure : failureMailResult });
    return false;
}

function displayMailResult(obj)
{
    document.mail_form.mail_preview.disabled = false;
    document.mail_form.mail_post.disabled = false;
    $("send_status").style.display = 'none';
    $("ajax_mail").innerHTML = obj.responseText;
}

function failureMailResult(obj)
{
    alert('メールの処理が失敗しました。');
    document.mail_form.mail_preview.disabled = false;
    document.mail_form.mail_post.disabled = false;
    $("send_status").style.display = 'none';
}
//-->
</script>

3.フォーム部分の書き換え

次に、メールフォーム／送信前確認／送信エラーの各テンプレートのフォーム部分を、以下のように書き換えます。

・IDの割り当て

formタグに「id="mail_form"」のアトリビュートを追加して、IDを割り当てます。

・タグの追加
フォーム内に以下のタグを追加します。

<input type="hidden" id="ajax" name="ajax" value="1" />

・「送信」「確認」ボタンの変更
「送信」および「確認」ボタンの部分を、以下のように変更します。

<input type="button" name="mail_preview" id="mail_preview" accesskey="v" value="確認" onclick="return mail_ajax('preview');" />
<input type="button" name="mail_post" id="mail_post" accesskey="s" value="送信" onclick="return mail_ajax('post');" />

4.Ajax化する部分をdivタグで囲む

次に、メールフォームテンプレートの中で、Ajaxによって表示を切り替えたい部分を、「<div id="ajax_mail">」と「</div>」のdivタグで囲みます。

5.状況表示用のｄｉｖタグを追加

次に、「送信」や「確認」のボタンをクリックしたときに、メッセージを表示するための部分を作ります。
メールフォームテンプレートの中で、上の4.の</div>タグの後あたりに、以下のタグを追加します。

<div id="send_status" style="display : none;">
<p>メールの処理中です...</p>
</div>

なお、divタグの中の部分は、ご自分で好きなメッセージに変えることができます。

6.送信前確認等のテンプレート・モジュールの書き換え

次に、送信前確認／送信エラー／送信完了の各テンプレート・モジュールを書き換えます。
これらのテンプレートモジュールには、Ajaxで表示する部分（上の4.のdivタグの内部に表示する部分）だけを入れます。

7.Ajax化のサンプルメールフォーム

以下をクリックすると、Ajax化したメールフォームのサンプルをダウンロードすることができます（MT標準テンプレートをベースにしたもの）。

MailFormSmpl_MT_Ajax.zip

8.前後のエントリー

メールフォームプラグインは解説が長いので、エントリーを複数に分けています。
前後のエントリーは以下のリンクで参照することができます。

前のエントリー（その10・メール本文のカスタマイズ）
次のエントリー（その12・サイドバー用Ajaxメールフォーム）

また、サイドバーの「関連するエントリー」の箇所に、メールフォーム関連のエントリーの一覧が表示されていますので、そちらもご利用ください。

お知らせ