もぜひご覧ください。
メールフォームプラグインでは、メールフォームを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標準テンプレートをベースにしたもの）。
8.前後のエントリー
メールフォームプラグインは解説が長いので、エントリーを複数に分けています。
前後のエントリーは以下のリンクで参照することができます。
前のエントリー（その10・メール本文のカスタマイズ）
次のエントリー（その12・サイドバー用Ajaxメールフォーム）
また、サイドバーの「関連するエントリー」の箇所に、メールフォーム関連のエントリーの一覧が表示されていますので、そちらもご利用ください。
![Hardcore Will Never Die, But You Will [Bonus Tracks]](http://userserve-ak.last.fm/serve/34s/67192634.jpg "Hardcore Will Never Die, But You Will [Bonus Tracks]")
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
お世話になっております。
Ajaxのメールフォームを導入させていただこうと今資料をみさせていただきながら必死にがんばっています。
上記の内容どおりしたつもりなのですが
実際に送信テストをした際、確認ページに飛びません。
http://www.fi-sc.com/cinderella-story/mail_form.html
実際の設置したページをリンクしますので
お手数ではございますがご確認いただけますでしょうか？
よろしくお願いします。
＞中田勝久さん
こんにちは。
メールフォームのページを拝見したところ、JavaScript内で<$MTCGIPath$>タグの出力が、「http://124.40.12.114/mt33/」のようにドメインの部分がIPアドレスになっています。
<$MTCGIPath$>タグの箇所を「http://www.fi-sc.com/mt33/」に書き換えれば動作すると思います。
お世話になっております。
技術的なサポートもいただきましてありがとうございます。
ご指摘いただきました内容で訂正しましたが
動作しないようです…
ほかに考えられる原因は何かありますでしょうか？
中田勝久です。
お世話になっております。
今確認しましたら動作しているようです！
お手数をおかけいたしました。
また資料も拝見させていただきまして
わからないことは質問させていただきます。
本当にありがとうございましたm(__)m