メールフォームプラグインV2.0・その18（メールフォームのAjax化）

メールフォームプラグインでは、メールフォームをAjax化することもできます。

1.メールフォームテンプレートの書き換え

まず、メールフォームテンプレートで、以下の2箇所を書き換えます。

1-1.MTMailFormAjaxJSタグの追加

メールフォームテンプレートの中に、以下のタグを追加します。
追加する位置は、メールフォーム本体を表示する直前が良いでしょう。

<$MTMailFormAjaxJS$>

1-2.Ajax化する部分をdiv要素で囲む

次に、Ajaxによって表示を変化させる部分を、「<div id="ajax_mail">」と「</div>」のタグで囲みます。

1-3.書き換えの例

Movable Type標準テンプレートセット用のメールフォームの場合、メールフォームのテンプレートを以下のように書き換えると良いでしょう。
赤字の箇所が書き換えた部分です。

<MTSetVar name="mail_setting" value="">
<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="sidebar" value="1">
<MTSetVarBlock name="page_title">メールフォーム</MTSetVarBlock>
<$MTInclude module="ヘッダー"$>

<$MTMailFormAjaxJS$>

<div id="ajax_mail">
    <h2 class="comments-open-header">メールの送信</h2>
<$MTIncludeMailFormCommon$>
</div>

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

2.メールフォーム共通部分テンプレートの書き換え

次に、「メールフォーム共通部分」のテンプレートで、フォーム部分（form要素の内部）に、以下のタグを追加します。

<input type="hidden" name="mail_ajax" value="1" />

また、送信と確認のボタンのタグを、以下のように書き換えます。

<input type="button" name="mail_preview" id="mail_preview" accesskey="v" value="確認" onclick="return FJAjaxMail.send('preview');" />
<input type="button" name="mail_post" id="mail_post" accesskey="s" value="送信" onclick="return FJAjaxMail.send('post');" />

3.送信確認等のテンプレートの書き換え

メールフォームをAjax化すると、送信確認／送信エラー／送信完了の各ページは、Ajaxによって表示されるようになります。
手順の1.でメールフォームテンプレートにdiv要素を追加しましたが、その内部がAjaxによって書き換えられます。
そこで、送信確認／送信エラー／送信完了の各テンプレートを書き換えて、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$>

4.処理待ち時および処理エラー時のメッセージの設定

Ajaxで通信処理を行っているときと、通信処理でエラーがあった時に、メッセージを表示することができます。
メールフォームの設定を開き、「Ajax」の部分の「処理待ち時のメッセージ」と「処理待ち時のメッセージ」の欄に、それぞれのメッセージを設定します。
メッセージの中では、Movable Typeのタグを使うこともできます。

↓処理待ち時および処理エラー時のメッセージの設定

5.メールフォームの再構築

ここまでの作業が終わったら、メールフォームのテンプレートを再構築します。
そして、メールフォームの動作を確認します。

6.Ajaxの制限

Ajaxでは、ドメインをまたがった通信を行うことができません。
この制限は、メールフォームプラグインでも当てはまります。

たとえば、Movable Type本体が「http://www.foo.com/～」のアドレスにインストールされているとします。
一方、ブログのアドレスが「http://blog.foo.com/～」になっているとします。
この場合、MTとブログのドメインが一致していないので、メールフォームをAjax化することができません。

お知らせ