もぜひご覧ください。
メールフォームプラグイン用のサンプルメールフォームでは、メールフォームを独立したページにしていました。
しかし、このプラグインでは、他のページの中にメールフォームを組み込むこともできます。
その例として、サイドバーにメールフォームを組み込み、かつAjax化したものを紹介します。
なお、メールフォームプラグインV1.20の解説はこれで最後になります。
1.サンプルのダウンロード
サイドバー用メールフォームのサンプルは、以下からダウンロードすることができます。
サンプルファイルを解凍すると、以下のファイルができます。
| ファイル | 内容 |
|---|---|
| mail_form.txt | サイドバーに組み込むメールフォームのサンプル |
| mail_preview.txt | 送信前確認テンプレートのサンプル |
| mail_error.txt | 送信エラーテンプレートのサンプル |
| mail_post.txt | 送信完了テンプレートのサンプル |
| index.txt | メインページのテンプレートにメールフォームを組み込んだサンプル |
| mailform.js | Ajaxの処理を行う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.前後のエントリー
メールフォームプラグインは解説が長いので、エントリーを複数に分けています。
前後のエントリーは以下のリンクで参照することができます。
また、サイドバーの「関連するエントリー」の箇所に、メールフォーム関連のエントリーの一覧が表示されていますので、そちらもご利用ください。
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
こんにちは。
AJAXメールフォーム愛用させて頂いております。
質問ですが、1つのブログ内で複数のメールフォーム
(フォームによって記入欄の種類などが異なる)を設定する
ことは可能なのでしょうか？
＞yujiさん
こんにちは。プラグインご利用ありがとうございます。
ご質問の件ですが、以下のエントリーを参照してください。
http://www.h-fj.com/blog/archives/2006/07/10-101621.php
複数のフォームの設置が出来ました!
これからも素晴らしいプラグインに期待しています。
有り難うございました。