お知らせ

フリーランスのための青色申告ガイドブック2012年1月11日

フリーランスのための青色申告ガイドブック」を発売しました。
青色申告にしてみたいが、やり方がよく分からないフリーランスの方のための解説書です。
会計ソフトの「やよいの青色申告」を使って、簿記の知識がなくても帳簿付けができるように工夫しました。
PDFによる販売で、当サイトでのみ購入できます(書店では購入できません)

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

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

| コメント(10) | トラックバック(0)

メールフォームプラグインでは、メールフォームを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化することができません。

Facebook連携

当記事について「いいね」や「送信」を行っていただけると幸いです。


この記事についてウォールに投稿

トラックバック(0)

トラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/1232.

メールフォームのトップからページ遷移するとレイアウト崩れが発生していたので、A... 続きを読む

コメント(スレッド6件,コメント10件)

コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。

No.1 やま : 4.2標準テンプレート(Ajax)について

お世話になります。

4.2標準テンプレート(Ajax)をインストールして使おうと思ったのですが、テストしたところ「メールを処理しています。しばらくお待ちください。」の表示画面で止まってしまって先に進めません。
何が原因なのでしょうか?
まだカスタマイズ前のフォーム作りたての状態で、こちらでいじったところはなく、さっぱり見当がつきません。
ちなみに4.2標準テンプレート(各種機能版)は問題なく動きますし、以前4.1標準テンプレート(Ajax)のテンプレートからカスタマイズして使ってた時も全然OKでした。

よろしくお願いします。

No.2 やま : 追伸: 4.2標準テンプレート(Ajax)について

ひとつだけ心当たりが・・・
このページの「6.Ajaxの制限」のところに
「Ajaxでは、ドメインをまたがった通信を行うことができません。」
とありますが、これってサブドメインでもやはりダメなのでしょうか?
そうだとすれば、すべて納得です。
4.1標準テンプレート(Ajax)が動いているのはMovable Type本体がインストールされてる親サイトですし、今回の4.2は新しくサブドメインで作った関連サイトなので・・・
その場合は原因は特定できたとしても、Ajaxあきらめるしかないですかね・・・^_^;

No.3  : Re:4.2標準テンプレート(Ajax)について

>やまさん
こんにちは。

ご質問の件ですが、サブドメインでもAjaxは使えません。
例えば、MT本体を「www.hogehoge.com」以下にインストールし、メールフォームを「blog.hogehoge.com」に出力した場合、Ajaxは使えません。

No.4 やま : (無題)

やはりそうでしたか。
どうもお騒がせいたしました。
ありがとうございました。

No.5 きの : MTMailFormAjaxJSタグエラー

こんにちは。
初めてコメントします。

4.2標準テンプレート(Ajax)にてインストールし、再構築を行ったところ以下の内容のエラーが出てしまいました
「テンプレート「mail_form:メールフォーム」の再構築中にエラーが発生しました: <mtMailFormAjaxJS>タグでエラーがありました: メールフォームの設定を読み込むのに失敗しました 」

特に編集したわけではないのですがもし、心当たりがあるような話でしたらご教授願えますか?

よろしくお願い致します。

No.6  : (無題)

>きのさん
こんにちは。
ご質問の件ですが、以下の点をご確認ください。

1.以下のページの「メールフォームテンプレートへのタグの追加」の作業は行っていただいたでしょうか。

http://www.h-fj.com/blog/archives/2008/02/02-103011.php

2.1.を行っているにも関わらずエラーが出る場合は、メールフォームの設定の名前を半角英数字だけに変えて、再度「メールフォームテンプレートへのタグの追加」を行ってから、メールフォームのテンプレートを再構築しなおしてください。

No.7 きの : (無題)

>壱さん

早速のご回答、ありがとうございました。
名称を全角で対応しておりました。

半角で設定名をセットしたところ、無事再構築できました。
罠というか無知というか、安心して老こんじゃったような気分でしたw

なにはともあれ、無事解決で助かりました。
感謝です。ありがとうございました!


>>きのさん
>こんにちは。
>ご質問の件ですが、以下の点をご確認ください。
>1.以下のページの「メールフォームテンプレートへのタグの追加」の作業は行っていただいたでしょうか。
>http://www.h-fj.com/blog/archives/2008/02/02-103011.php
>2.1.を行っているにも関わらずエラーが出る場合は、メールフォームの設定の名前を半角英数字だけに変えて、再度「メールフォームテンプレートへのタグの追加」を行ってから、メールフォームのテンプレートを再構築しなおしてください。

No.8 plume : 送信完了画面にCVタグを設置したい

いつもお世話になっております。

Ajax版を使わせて頂いておりますが、送信完了のテンプレートに、GoogleのCVカウンターを設置したのですが、動作してくれません。
firebugでソースを確認したところ、noscriptの記述はあるのですが、<script></script>の記述は消えているようです。

<div id="ajax_mail"></div>
の中にscriptを書いてもダメなのでしょうか?

もしその場合、CVタグをサンクスページに設置する方法はありますか?

お忙しいところ恐れ入りますが、ご教授いただけますようよろしくお願いします。

No.9  : Re:送信完了画面にCVタグを設置したい

>plumeさん
こんにちは。

ご質問の件ですが、Ajax一般の仕組みで、Ajaxで読み込まれた内容にJavaScriptが入っていても、それは自動的には処理されません。
送信完了時点で何かJavaScriptを実行したければ、以下のような考え方でカスタマイズを行います。

1.メールフォームのテンプレートに、送信完了時に実行したいJavaScriptを入れておきます。
2.mt-static/plugins/MailForm/js/mailform.jsの中の「success : function(html) {」の部分を書き換えて、送信完了結果を表示するとともに、1.のJavaScriptを実行するようにします。

No.10 plume : Re:送信完了画面にCVタグを設置したい

>壱さん

ご回答いただきありがとうございます。

javascriptの知識がなく、具体的な記述方法がわからなかったのですが、プログラマの知人にご回答いただいた内容を見せたところ簡単に対応してくれました。

解決することができて助かりました。
ありがとうございました!

コメントする


Facebookでコメント

試験的にFacebookのコメントフォームを設置しました。