拙著「FXはチャートで勝つ!」が発売されました。
FX(外国為替証拠金取引)でのチャートの読み方を解説しています。
自由国民社刊で、定価1,728円(消費税込み)です。
メールフォームプラグイン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="フッター"$>
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください
suzie
こんにちは。
メールフォームプラグインをありがたく使わせていただいております。
さて、タイトルの件ですが、フォーム入力→送信確認画面→送信完了という流れにしたいのですが、IEで何故か送信確認画面にならず即送信完了されてしまいます。
サンプルテンプレートからカスタマイズしたのでそんなにおかしなことにはならないと思っていたのですが、どのような原因が考えられますでしょうか。
今のところWinIE6,MacIE5.2.3で上記の挙動を確認しています。IE7は未確認です。
ご返信いただけますと幸いです。
どうぞよろしくお願いいたします。
壱からsuzieへの返信
>susieさん
こんにちは。
そちらのフォームではボタンが画像になっていますが、画像のボタンがクリックされた場合、Firefoxではボタンのvalue属性の値がフォームに送信されますが、IEでは送信されません。
そのため、メールフォームプラグインが「確認ボタンが押されていない」と判断してしまい、即時送信の動作になっています。
この問題を回避するには、以下のような手順をとることが考えられます。
1.確認ボタンのname属性を「mail_preview」以外にする
2.フォームに以下のタグを追加する
<input type="hidden" name="mail_preview" value="" />
3.確認ボタンに、以下のようなonclick属性を追加する
onclick="this.form.mail_preview.value = 'preview';"
suzieからsuzieへの返信
壱さま
ご返信ありがとうございます。
ご指示頂いたとおりに直しまして、
IEでもうまく送信確認画面を出せるようになりました。
無知のせいでお手数をおかけしました。
どうもありがとうございました!