静的ページPHPでフォームメールページを作成            Version: 2.1.4
                                                 Create: 2010/08/24
                Authors: Hiroshi Sakuramoto - hiro AT winkey DOT jp



静的ページPHPで汎用フォームメール(お問合せ)を設置するものです。

詳しくは、wikiドキュメントの
 [3]管理方法 >> 
 3.静的ページPHPでページを作成する >> 
 9.汎用お問い合わせフォームをPHPで設置する
をご覧ください。

http://wiki.geeklog.jp/index.php/%E6%B1%8E%E7%94%A8%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%82%92PHP%E3%81%A7%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B


【クイックインストール】
※グループで静的ページPHPをONにしている方は 3. からどうぞ。

 1. 管理者ログインしてグループを開き、「Static Page Admin」の編集を
クリックします。

 2. 権限の「staticpages.PHP」にチェックをつけて保存します

 3. 次に静的ページを開き、「新規作成」をクリックします。

 4. タイトルを「フォームメール」、IDを「formmail」、テキストエリアに
 staticpages_formmail.php をコピー＆ペーストして、ブロックで囲むのチ
ェックを外して、PHPを「PHPを実行する」にして保存します。

 5. 次にFTPソフトにて images を 公開領域の images へアップロードします。

 6. add_to_custom.css の内容を利用しているテーマの
 stype.cssかcustom.cssの末尾へ追加します。
 ※テーマにより追加するcssが違う場合があります。
 ※基本は最後に読み込まれるcssの末尾へ追加です

 7. 画像認証に「GDライブラリ(妹認証)」以外を使う場合は、
 add_captcha.thtml の内容を利用しているテーマディレクトリの中へ
 sp_formmailディレクトリを作成し、captcha.thtmlとして保存します。
 例) professionalテーマの場合
   public_html/layout/professional/sp_formmail/ フォルダを作成し
   この中へ add_captcha.thtml の内容で
   public_html/layout/professional/sp_formmail/captcha.thtml を作成

 8. 日付の入力フォームにカレンダー表示を利用する場合は、
 add_to_javascriptディレクトリの中身を public_html/javascriptの中へアップロードします。
 アップロードすると public_html/javascirpt/calendar/ の中に各種jsファイルやgifが配置される状態になりればOKです。

 9. ブラウザで以下のURLにアクセスして完了です。
「http://あなたのサイト/staticpages/index.php?page=formmail」
 ※CSSや画像がキャッシュが利用され更新された内容でない場合がありますので、
 ※ブラウザの再表示を押してみてください。



【入力文字数の制限をするには】
maxlengthを項目設定の中に追加します。
(入力エラーチェックの valid_maxlen も一緒に利用することをお勧めします)

例）====================================
    array('type' => 'text',
          'name' => 'q_name_1',
          'size' => '40',
          'maxlength' => '40',    <--ここ
          'class' => 'bginput ime_on',
          'value' => $username
    ),
========================================



【文字入力のモード(IME)を半角、全角を自動で適切に変更するには】
class指定の中に"ime_on"を指定すると全角モードになり、"ime_off"を指定すると半角モードになります。
※CSSを利用していますのでサンプルCSSから該当部分をお使いのテーマCSSに適用してください。

例）====================================
    array('type' => 'text',
          'name' => 'q_name_1',
          'size' => '40',
          'maxlength' => '40',
          'class' => 'bginput ime_on',  <--ここのime_onで全角モードになる
          'value' => $username
    ),
========================================



【入力チェック項目一覧】
valid_require => '必須用文字列'  : 必須チェック
valid_equal => $essential_email  : 別の項目と同じかチェック => "メール一致チェック項目指定"
valid_email => $propriety_email  : メールかチェック => "メールアドレスチェック項目指定"
valid_notzero => '項目名指定'    : 指定項目が足して0以外かチェック（宿泊大人&子供の人数などで利用）
valid_numeric => '項目名指定'    : 半角の数値のみかチェック
valid_phone   => '項目名指定'    : 半角の数値,+(半角プラス),-(半角マイナス),半角スペースのみかチェック
valid_hankaku => '項目名指定'    : 半角かチェック（全部半角かどうか）
valid_zenkaku => '項目名指定'    : 全角かチェック（全部全角かどうか）
valid_eisuhan => '項目名指定'    : 半角英数字かチェック（全角がなく、半角英数字、記号も不可）
valid_kanazen => '項目名指定'    : 全角カタカナかチェック（全部全角カタカナ、記号も不可）
valid_hirazen => '項目名指定'    : 全角ひらがなかチェック（全部全角ひらがなか、記号も不可）
valid_notkanahan => '項目名指定' : 半角カタカナ以外かチェック
valid_maxlen  => '項目名=文字数' : 指定文字数以下かチェック
valid_minlen  => '項目名=文字数' : 指定文字数以上かチェック
valid_captcha => '必須用文字列'  : CAPTCHA専用チェック
※項目名指定は,(カンマ)区切りで複数指定できます



【TEXTAREAの入力文字数の制限】
２つの対策により効果的に実現！

その１）JavaScriptにより(Twitterのように)のこり文字数を表示して入力しているユーザに視覚的にうったえかけることで送信(POST)前でも文字数がわかる。

========================================
            array('type' => 'textarea',
                  'name' => 'q_other',
                  'class' => 'bginput ime_on',
                  'style' => 'width: 95%; height: 100px;',
                  'onKeyup' => "var n=200-this.value.length;var s=document.getElementById('tasp1');s.innerHTML='('+n+')';"  <--ここで残り入力可能文字数を表示。200が最大文字数。tasp1が表示するSPANのid。
            ),
            array('input' => '<br'.XHTML.">※お問い合わせ内容を入力してください。<strong><span id='tasp1'></span></strong><br".XHTML.'>'),  <--ここのSPANタグ内へ表示。複数のtextareで行う場合はidを適切に変えること。
========================================


その２）送信(POST)された入力内容をチェックして文字数を超えていたらエラーを表示。

========================================
    array('header' => 'お問い合わせ内容',
          'valid_notkanahan' => 'q_other',
          'error_notkanahan' => 'お問い合わせ内容に半角カタカナがあります。すべて全角で入力してください',
          'valid_len' => 'q_other=200',
          'error_len' => 'お問い合わせ内容の文字数は200文字以内で入力してください',
          'data' =>
========================================



【日付入力でカレンダーを表示して選択】
JavaScript + CSS にてカレンダーを表示して日付を選択できるようにします。

  //この機能にはCalendarライブラリを利用しています。オリジナルの著作権、配布はこちらです。
  //  Calendar RC4, (c) 2007 Aeron Glemann, MIT Style License
  //  http://www.electricprism.com/aeron/calendar/

その１）デフォルト設定
設定部分でJavaScriptやCSSを利用するようデフォルトでは以下のように宣言してます。
※各自で微調整や他JavaScirptライブラリも使えるように考慮してこのような形にしてあります。

$use_jslib を TRUE にしてJavaScriptライブラリを利用可能にします。（利用しない場合は FALSE にします）
========================================
# JavaScriptライブラリの利用 (カレンダー表示用)
$use_jslib = TRUE;
========================================


カレンダー表示用のJavaScriptを以下のように設定します。

以下の宣言の中にq_date1という部分があり、これは「その２）利用例」のnameと一致しています。変更する場合は両方を変更してください。
========================================
# JavaScriptライブラリ等の宣言
#   カレンダー表示用JavaScript+CSS
#     Calendar RC4, (c) 2007 Aeron Glemann <http://electricprism.com/aeron>, MIT Style License
#     (http://www.electricprism.com/aeron/calendar/)
$def_jslib = <<<JSLIB

<script type="text/javascript" src="{$_CONF['site_url']}/javascript/calendar/mootools.js"></script>
<script type="text/javascript" src="{$_CONF['site_url']}/javascript/calendar/calendar.js"></script>
<link rel="stylesheet" type="text/css" href="{$_CONF['site_url']}/javascript/calendar/calendar.css" media="screen" />
<script type="text/javascript">
 window.addEvent('domready', function() { myCal = new Calendar({ q_date1: 'Y/m/d/' }, { days: ['日','月','火','水','木','金','土'], months: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] }); });
</script>
JSLIB;
========================================


その２）利用例
カレンダーを利用するようCSSのcalendarをclassに指定し、入力フォームとカレンダーアイコンを整列させるためにstyleにfloat:left;を指定します。
以下の例でnameのq_date1という部分は「その１）デフォルト設定」の「JavaScriptライブラリ等の宣言」の中にあるq_date1と一致しています。変更する場合は両方を変更してください。
========================================
    // < テーブル１行
    array('header' => '希望日', 'data' =>
        array(
            array('type' => 'text',
                  'name' => 'q_date1',
                  'id' => 'q_date1',
                  'size' => '20',
                  'maxlength' => '10',
                  'class' => 'bginput ime_off calendar',  <--ここにcalendarを記述
                  'style' => 'float:left;'  <--ここで入力フォームの右にカレンダーアイコンが綺麗に並ぶようにfloat:leftを記述
            ),
        ),
    ),
    // > テーブル１行
========================================





【更新履歴】
2010/08/23  2.1.4
 * FORMのACTIONにXSS対策を行う
2010/07/14  2.1.3
 * メディアギャラリ1.6.10WKZで日付のカレンダー表示ができるよう調整
 * cssを整理
 * imageの色を変更
 * 入力チェックに電話番号チェックを追加
 * 英語版の作成 (thanks kobab, ivy)
 * FORMデフォルトのサンプルのnameを英語版と共通で使えるように変更
 * 項目設定のinputタグのtypeでhidden、reset、password、buttonに対応
 * 日付入力カレンダー用に追加対象が add_to_calendar では分かりにくいため add_to_javascript に変更
2010/05/28  2.1.2
 * メディアギャラリ使用時に日付のカレンダーが表示されない不具合を修正
2010/05/27  2.1.1
 * 日付入力にカレンダー表示を利用できる機能追加
 * 数値チェックのバグを修正
 * 文字数チェックに最小チェックも追加
2010/05/07  2.1.0  (Presented by:IvyWe)
 * 日本語入力(IME)の全角と半角のモードを切り替える機能追加
 * 入力文字数制限のサンプルをデフォルトフォームに採用
 * 入力チェックに数値のみ、半角、全角、半角英数字、全角カタカナ、全角ひらがな、半角カタカナ以外、最大文字数の８つのチェックを追加
 * XSS(クロスサイトスクリプティング)対策を行う
 * textareaに(Twitterのように)あと何文字入力できるか表示するサンプルを追加
2010/04/19 2.0.8
 * CAPTCHA利用時にサンプルCSSで見た目が崩れるのを修正
2010/04/12 2.0.7
 * ログインユーザ名セットでfullnameがあればこちらをセット
 * 末尾のechoのコメントアウトをはずしGeeklog1.6系の「PHPを実行」にあわせる
 * ログインユーザに画像認証が表示されない場合、項目名もでないよう対応
   上記は下記URLのトピック #1,#2 を参考
   http://sns.geeklog.jp/?m=pc&a=page_c_topic_detail&target_c_commu_topic_id=886
2010/03/22 2.0.6
 * ログインしてたらユーザ名とメールアドレスを利用できるように追加
   http://www.geeklog.jp/forum/viewtopic.php?showtopic=14819
2009/10/11 2.0.5
 * $_CP_CONFを$_CP_CONFIGとtypeミスを以下の指定より修正
   http://www.geeklog.jp/forum/viewtopic.php?showtopic=13907&lastpost=true#13938
2009/03/28 2.0.4
 * metatagプラグインが入ってる場合の不具合に対応
2009/03/26 2.0.3
 * 携帯で初回表示にエラーチェックしてしまうのを修正(携帯ハックがPOSTを作成してる)
2009/03/06 2.0.2
 * CSVデータに出力しない機能を追加 ('not_csv')
 * CSVのカラムがチェックボックスON/OFFでずれていたのを修正
2009/02/23 2.0.1
 * 確認用の入力など確認画面に反映しない機能を追加 ('not_confirm')
2009/02/12 2.0.0
 * 画像認証に対応

