[October 22, 2006]

MT メールフォームのAjax対応版へのアップロード

Category: Movable Type

第8回 メールフォームプラグイン(Ajax対応)の導入

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

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

  1. プラグインを入手し、解凍後のフォルダー「MailForm」をMovable Typeの「plugins」ディレクトリの中にアップロードする。
  2. Ajaxライブラリーprototype.jsを入手しBlogの出力先ディレクトリにアップロードする。prototype.jsはダウンロード後解凍したフォルダprototype-1.4.0 2のsrcフォルダーの中にあります。
  3. アップロードの方でAjax版導入後、確認ボタンをクリックしても機能しない時は、form要素にid="mail_form"を追記します。
  4. メールフォームプラグイン(Ajax対応)のページからサンプルページがダウンロードできます。このサンプルページで動作を確認してから、ご自分のブログ用にカスタマイズする方がいいと思います。
  5. サンプルページの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な動きをするようになって、とてもいい気分です。

by Harada Hiroki : October 22, 2006 9:50 PM

Tag: Ajax, Movable Type, プラグイン, メールフォーム


Amazon Search

Trackbacks

Trackbacks URL:
http://bitbizdesign.com/mt/mt-tb.cgi/248

▼この一覧は、次のエントリーを参照しています: MT メールフォームのAjax対応版へのアップロード:

» Ajaxのメールフォームプラグイン
送信元 :デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記

デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
このブログのサイドバーにわたくしにメール送信できるようにメールフォームを取り付けましてん。一見、ただのメールフォームなのですが、これがなかなかいいんですわ... [詳しくはこちら]

Comments::コメント

はじめまして
私もH.Fujimotoさんのメールフォームを導入したのですが、2カラムのサイドバーが横ではなく下に表示されるようになってしまいました。こちらはちゃんと横に表示されているのですが、設置にあたり、何か書き換える部分があるのでしょうか?

by まつお Site icon : November 30, 2006 10:18 PM

“MT メールフォームのAjax対応版へのアップロード”へのコメントを書く




保存しますか?