メールフォームプラグインV2.0・その8（送信確認／送信エラー／送信完了テンプレートの作成）

1.テンプレート・モジュールの作成

送信確認等のテンプレートは、テンプレート・モジュールとして作ります。
これらのテンプレートモジュールの名前の先頭には、以下の接頭語をつける必要があります。

例えば、送信確認のテンプレートモジュールには、「mail_preview:送信確認」のような名前をつけます。

2.テンプレートの基本的な枠組み

送信確認等のテンプレートは、メールフォームテンプレートと同様に、モジュール化の仕組みを利用しています。
そのため、メインページのテンプレートをベースにすると作りやすいです。
メインページのテンプレートから、ブログ記事一覧を出力する部分を削除して、代わりにメールの内容を確認するための部分などを入れます。

3.テンプレート内で利用できるタグ

送信確認等のテンプレートでは、以下のテンプレートタグを使うことができます。

例えば、テンプレートの中に「<$MTMailPreviewAuthor$>さん、メールをありがとうございます。」と入れるとします。
すると、MTMailPreviewAuthorタグの部分が、メールを送信してくれた人の名前に置き換わって表示されます。

4.メールフォームで入力された内容を表示

送信確認や送信エラーのページには、コメントプレビューのページと同じように、メールフォームで入力された内容を再表示すると良いでしょう。
また、送信完了のページでは、「メールをお送りいただき、ありがとうございました。」のようなメッセージを表示するようにすると良いでしょう。
MTMailPreview系のタグを組み合わせて、送信前確認ページ等に表示する部分を作っていきます。

ただし、MTMailPreviewBodyタグでメールの本文を表示する場合、そのままでは改行がbrタグには変換されません。
改行をbrタグに変換するには、MTMailPreviewBodyタグに「convert_breaks="1"」のアトリビュートを付加します。
このようにした場合、エントリーの本文と同様に、メール本文の前後がpタグで囲まれます。

5.メールフォーム本体の表示

送信前確認ページや送信エラーページでは、メールの内容をその場で修正できるように、メールフォームも再表示するようにすると良いと思います。
「メールフォーム」テンプレートと同様に、メールフォーム本体（formタグの部分）は、「メールフォーム共通部分」のテンプレートモジュールを組み込む形を取ります。
それには、formタグを挿入したい位置に、「<$MTIncludeMailFormCommon$>」のタグを入れます。

6.テンプレートの例

ここまでの話に基づいて、Movable Typeの標準テンプレートセット用に送信確認のテンプレートを作ると、以下のようになります。

中ほどのdivタグで囲まれた部分で、確認用にメールの内容を出力します。
MTMailPreviewAuthor等のタグを使って、メールの送信者等の情報を出力します。

また、確認の部分の後にMTIncludeMailFormCommonタグがあり、これによってメールフォーム本体（formタグの部分）が出力されます。

<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVarBlock name="page_title">メールの確認</MTSetVarBlock>
<$MTInclude module="ヘッダー"$>

<div>
    <h2 class="comments-open-header">メールの確認</h2>
    <div class="comments-open-content">
        <p>以下の内容でメールを送信します。<br />内容を修正する場合は、この後にあるメールフォームで修正してください。</p>
        <p>名前:<br /><$MTMailPreviewAuthor$></p>
        <p>メールアドレス:<br /><$MTMailPreviewEMail$></p>
        <p>題名:<br /><$MTMailPreviewSubject$></p>
        <p>本文:<br /><$MTMailPreviewBody convert_breaks="1"$></p>
    </div>

    <h2 class="comments-open-header">メールフォーム</h2>
<$MTIncludeMailFormCommon$>
</div>

<$MTInclude module="フッター"$>