メールフォームプラグインV1.20（その12・サイドバー用Ajaxメールフォーム）

メールフォームプラグイン用のサンプルメールフォームでは、メールフォームを独立したページにしていました。
しかし、このプラグインでは、他のページの中にメールフォームを組み込むこともできます。
その例として、サイドバーにメールフォームを組み込み、かつAjax化したものを紹介します。

なお、メールフォームプラグインV1.20の解説はこれで最後になります。

1.サンプルのダウンロード

サイドバー用メールフォームのサンプルは、以下からダウンロードすることができます。

サンプルファイルを解凍すると、以下のファイルができます。

ファイル内容
mail_form.txtサイドバーに組み込むメールフォームのサンプル
mail_preview.txt送信前確認テンプレートのサンプル
mail_error.txt送信エラーテンプレートのサンプル
mail_post.txt送信完了テンプレートのサンプル
index.txtメインページのテンプレートにメールフォームを組み込んだサンプル
mailform.jsAjaxの処理を行うJavaScript
styles-site.cssスタイルシートのテンプレートに追加する部分

2.JavaScriptの準備

まず、prototype.jsを入手して、Blogの出力先ディレクトリにアップロードしておきます。

次に、「mailform.js」というJavaScriptのファイルを作成します。
インデックス・テンプレートを1つ新規作成し、テンプレート名と出力ファイル名を「mailform.js」にします。
そして、解凍したzipファイルの中の「mailform.js」の内容をすべてコピーし、「テンプレートの内容」の欄に貼り付けます。
ここまでが終わったら、テンプレートを保存して再構築しておきます。

3.スタイルシートの書き換え

次に、スタイルシートのテンプレートに、メールフォーム用の記述を追加します。

スタイルシートのテンプレートを開き、その最後に、zipファイル内の「styles-site.css」の内容を貼り付けます。
そして、スタイルシートのテンプレートを保存して、再構築します。

4.各テンプレートの書き換え

次に、メインページのテンプレートや各アーカイブ・テンプレートを書き換えます。

まず、ヘッダー部分（<head>～</head>）に、以下のタグを追加します。 

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mailform.js"></script>

そして、zipファイル内の「mail_form.tmpl」の内容をコピーして、テンプレートのサイドバーの部分に貼り付けます。
なお、zipファイル内の「index.tmpl」には、メインページのテンプレートに「mail_form.tmpl」を貼り付けた例があります。

5.送信前確認ページ等のテンプレートの作成

次に、送信前確認ページ等のテンプレートを作成します。
これらのテンプレートは、テンプレート・モジュールとして作ります。

Blogのメニューで「環境設定」の中の「テンプレート」をクリックして、テンプレート一覧のページを開きます。
そして、「モジュール」のタブに切り替え、その右上の方にある「モジュールの新規作成」のリンクをクリックして、テンプレート・モジュールを新規作成します。
「テンプレート名」の欄に「mail_preview」と入力し、にし、「モジュールの内容」の欄に、送信前確認ページのテンプレート（mail_preview.txt）の内容をすべて貼り付けて保存します。

同様の手順で、送信エラーページ（mail_error.txt）は「mail_error」という名前のテンプレートモジュールに保存し、送信完了ページ（mail_post.txt）は「mail_post」という名前のテンプレートモジュールに保存します。

6.動作の確認

ここまでで、サイドバー用メールフォームが完成します。
メールフォームを入れたページにアクセスして、動作を確認します。

7.前後のエントリー

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

前のエントリー（その11・メールフォームのAjax化）

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