BitbizDesign/Hiroki Harada: Movable Type

[October 22, 2006]

The blog of H.Fujimotoさんに、メールフォームプラグインのAjax対応版が公開されていたので、アップロードしました。 Ajax対応版の設置法の詳細は、The blog of H.Fujimotoさんのエントリーをご参照下さい。

アップロードの際の留意点のみメモしておきます。

プラグインを入手し、解凍後のフォルダー「MailForm」をMovable Typeの「plugins」ディレクトリの中にアップロードする。
Ajaxライブラリーprototype.jsを入手しBlogの出力先ディレクトリにアップロードする。prototype.jsはダウンロード後解凍したフォルダprototype-1.4.0 2のsrcフォルダーの中にあります。
アップロードの方でAjax版導入後、確認ボタンをクリックしても機能しない時は、form要素にid="mail_form"を追記します。
メールフォームプラグイン（Ajax対応）のページからサンプルページがダウンロードできます。このサンプルページで動作を確認してから、ご自分のブログ用にカスタマイズする方がいいと思います。
サンプルページのmail_form.txtをMTのindexテンプレートとしてmail_form.html、mail_error.txt、mail_post.txt、mail_preview.txtは、それぞれmail_error、mail_post、mail_previewモジュールとして、作成します。

僕は、処理中にajax-loderの画像を表示するよう、ヘッダー部分のスクリプトをカスタマイズしました。

【修正前】

 $("send_status").innerHTML = '<p>送信中です...</p>';

処理中イメージはAjaxload - Ajax loading gif generatorから入手できます。

【修正後】

 $("send_status").innerHTML = '<div class="loder">
<img src="<$MTBlogURL$>i/ajax-loader.gif " /></div>';

フォームメールがAjaxな動きをするようになって、とてもいい気分です。