plugins:np_itemformmail

NP_ItemFormmail.php

メール送信フォームを実装します。設定のしやすさとデザインの自由度の高さが特長。アイテム単位で設置できるため、いくつでも自由にメール送信フォームを作ることができます。

General Plugin info
作者: kosugiatkips(※メンテナンスの引継を希望されています)
最新のバージョン: 0.5.7
入手先: np_itemformmail-057.zip( zip形式、28KB)
ソース: plugins:np_itemformmail:np_itemformmail_code
動作サンプル: 【プラグインが実際に動いているデモが見られるページへのリンク】
フォーラム参照先: http://japan.nucleuscms.org/bb/viewtopic.php?t=1690
セキュリティチェック:
ステータス:α開発版

注意事項

このプラグインのステータスはα開発版です。

  • 完全なセキュリティチェックは行われておりません。
  • 将来のバージョンでは、予告なく大幅な仕様変更が行われ下位互換性を維持しない可能性があります。
  • 環境によっては正しく動作しない可能性があります。(phpのバージョン、mbstringの設定など)

インストール方法

  1. Zipファイルを展開して、中身をサーバーのプラグインディレクトリにアップロードする
  2. 管理画面からプラグインをインストールする

このプラグインの使い方

  • アイテムの[続き]の<!%itemformmail%!>~~<!%/itemformmail%!>の間に、<!%uform( )%!>タグを記述します。これはNP_ItemFormMailにより解釈されフォームエレメント(inputタグ)に置き換えられて出力されます。詳しくは下記の記述例を参考にしてください。アイテム内への<% %>の記述は標準のパーサーとバッティングすることがあるのとプラグイン削除時にDISALLOWとなってしまうことを避けるため、HTMLに入ってもコメントとして解釈される<!% %!>を採用しました。(順番に注意)
  • プラグインオプションでメール送信時のデフォルト設定を行うことができますが、ブログ設定またはアイテム内uformタグ(option,sendto)でオプションの上書きができます。

<!%uform()%!>のパラメータ解説

<!%uform(param1, param2, param3, param4, param5, param6)%!>

1番目のパラメータ
確認画面での表示順を数値で指定します。ただし「option」を指定した場合はinput type="hidden" 扱いで特殊なパラメータを渡します。第2パラメータ・第3パラメータと組み合わせ、たとえば送信メールのタイトルやThanksメッセージなどを設定できます。

2番目のパラメータ
フォーム部品の種別を示す。text、radio、textareaなど。1番目のパラメータに「option」を指定した場合は、ここではコマンドを指定します。successmessage・subject・usepreview・autoreply・autoreplysubject・autoreplybody・autoreplyfrom・autoreplyfromjp・sendto・usecaptchaなどがある。

3番目のパラメータ
NP_ItemFormmailが各項目を処理の上で区別するためのIDのようなもの。他の項目と重ならない名前を半角で設定してください。あくまでもプログラムの処理の都合なので、分かりやすい名前でなくてもかまいません。
1番目のパラメータに「option」を指定した場合は、ここにコマンドの値を記述します。複数行に渡る記述も可能なので、successmessageオプションによるThanksページ記述も無理なく表現できます。

4番目のパラメータ
項目名。これが送信メールや確認画面中の項目名として利用されます。

5番目のパラメータ
<!%uform(10,text,email,メールアドレス,email)%!>であれば、これがemailアドレスとしてセットされることを意味します。他にはename(From:にセットする名前)やneed(記入必須項目の指定)があります。

6番目のパラメータ
やや解釈が難しいパラメータ。フォーム部品によって記述が少し異なります。textおよびtextareaに関しては、inputタグに盛り込みたい内容を自由に記述できるため柔軟なフォーム構成が可能。ただし「 , 」は記述できないため注意(Nucleus本体がパースしてしまうため)。たとえばajax系ライブラリを組み込む際、パラメータ記述に「 , 」を利用するものが稀にあるため注意が必要です。
selectやradioに関しては選択肢項目をここに記述します。

他にもいくつかありますが、詳細はソース参照。

使用例

アイテムの「続き」への記入例(ver.0.5.5)
※実際にはtableタグなどを利用して分かりやすくデザインするといいでしょう。NP_ItemFormMailは<!%itemformmail%!>~<!%/itemformmail%!>の中の<!%uform(*)%!>の値だけを拾って処理し、他のタグ記述などは無視します。そのため自由度の高いフォームデザインが可能です。

<h2>メール送信フォーム</h2>
<!%itemformmail%!>
<form name="form1" method="post" action="">
●お名前: <!%uform(1,text,name,名前,ename)%!><br />
●おところ: <!%uform(2,text,address,住所)%!><br />
●コメント: <!%uform(3,textarea,comment,コメント,need,cols="20" rows="5")%!><br />
●好きな果物: <!%uform(4,select,fruit,好きな果物,need,特になし
ラフランス/ /selected
パイナップル
クランベリー
ドリアン
その他)%!><br />
●性別: <!%uform(5,radio,sex,性別,,男性
女性//selected
不明)%!><br />
●未成年?: <!%uform(6,checkbox,under20,未成年?,,未成年//checked)%!><br />
●E-Mail: <!%uform(7,text,email,メールアドレス,email)%!><br />
●確認用: <!%uform(8,text,confirm,,confirm)%!><br />
<!%captcha%!><br />
<input name="sendmail" type="hidden" value="true"/>
<input type="submit" name="Submit" value=" 送 信 " class="formbutton" />
<input type="reset" name="Submit" value=" リセット " class="formbutton" />
</form>
<!%uform(option,title,ホームページからの送信)%!>
<!%uform(option,successmessage,お問い合わせありがとうございます。<br />
すぐ返事します。)%!> <!-- ※複数行に渡って書ける----->
<!%/itemformmail%!>

CSSへの記入例(ver.0.5.5)

.form-preview {
   width: 400px;
   border: 1px solid #666666;
}
.form-name {
   border: 1px solid #CCCCCC;
   background-color: #EEEEEE;
   width: 120px;
}
.form-value {
   border: 1px solid #CCCCCC;
}
.formerror {
   font-weight:bold;
   color:red;
}
.form-notice {
   font-weight:bold;
   color:#FF3300;
}

スキン/テンプレートへの記述

  • スキン変数・テンプレート変数は使いません。

オプション

  • プラグインオプション・ブログの設定・アイテム内のuformタグ(optionパラメータ)指定がそれぞれ利用できます。設定値は特に指定がなければプラグインオプション・ブログ設定・uformタグの順にデフォルト値として継承されるため便利です。たとえばプラグインオプションでどのように指定していても、ブログ設定またはアイテム内で自由に設定を上書きできます。

Tipsと裏技

  • NP_SkinLayerをうまく使うと、スキンを切り替えることなく、メールフォーム用のアイテムだけコメント欄、トラックバック欄を非表示にできます。
  • 6番目のパラメータでCSSプロパティ「ime-mode」を設定すると、IE限定ですが項目ごとにIMEの状態を制御できます。メールアドレスをIME単語登録してる人多いと思うので、そういうところはdisabledじゃなくてinactiveがよさそうです。
  • ブラウザの入力フォームはデフォルト状態では窮屈な印象があります。paddingで適切に余白をとったり、項目によってはVerdanaなど可読性のいいフォントを指定したり行間・文字間・フォントサイズを適切に設定するなどすると使いやすいフォームになると思います。これらも6番目のパラメータで自由に記述できます。
  • フォーカスが当たっているフォーム要素をハイライト表示するJavaScriptライブラリ「Highlight active input」

希望事項

NP_ExItemと同居するときは、本プラグインを上にして先にパースしてください。

バグ

開発履歴

  • 0.2 form element update + bugfix
  • 0.3.1 security reason update
  • 0.3.2 fix mymbmime
  • 0.4.0 refactoring all
  • 0.4.1 <% → <!% this is html comment
  • 0.5.0 abort a email field . and more option and compatible with NP_Captcha
  • 0.5.1 delete Admin Area
  • 0.5.2 bug fix Captcha relation and updatescripts
  • 0.5.3 bug fix Captcha error in logged in
  • 0.5.4 bug fix duplicate mail sending problem in some environment
  • 0.5.5 bug fix checkbox problem and ename and preview
 
plugins/np_itemformmail.txt · 最終更新: 2011/03/23 21:28 (外部編集)