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

メールフォームプラグインでは、送信確認ページ/送信エラーページ/送信完了ページもテンプレートで作ることができます。
これらのページの作り方を解説します。

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

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

テンプレートモジュール接頭語
送信確認mail_preview:
送信エラーmail_error:
送信完了mail_post:

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

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

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

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

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

テンプレートタグ内容
MTMailPreviewAuthorメールの送信者の名前
MTMailPreviewEMailメールの送信者のメールアドレス
MTMailPreviewSubjectメールの件名
MTMailPreviewBodyメールの本文

例えば、テンプレートの中に「<$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="フッター"$>

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください