PowerCMS™

【東京セミナー】6月6日(木) 企業Webリニューアル。最初に押えたい要件定義の進め方と、最新CMSで出来ること

PowerCMS ブログ

ホーム > PowerCMS ブログ > 高度なフォームを作る (電子メールの入力確認、添付ファイル、隠し項目など)

2014年02月14日

高度なフォームを作る (電子メールの入力確認、添付ファイル、隠し項目など)

ContactForm では、フォーム項目をプラグインで追加することが可能です。

下記の記事にて具体的な追加方法について説明しています。

本記事では、それらの追加フォーム項目をご紹介します。PowerCMS 4.02 では、これらのプラグインが追加されました。

追加フォーム項目

  • 日付(ドロップダウン) (CFDateDropDownField プラグイン)
  • 電子メール(確認用) (CFEmailCheckField プラグイン)
  • ファイル (CFFileField プラグイン)
  • 隠し項目 (CFHiddenField プラグイン)
  • テキスト(複数フィールド) (CFTextMultiField プラグイン)
  • パスワード

日付(ドロップダウン) (CFDateDropDownField プラグイン)

ドロップダウン形式で年・月・日を選択するフォーム項目を追加します。

下記の記事にてサンプルプラグインとして紹介しておりますので、詳しくはそちらをご参照ください。

電子メール(確認用) (CFEmailCheckField プラグイン)

フォームでよく見かける、確認用メールアドレスのフォーム項目を追加します。

フォーム項目の編集画面

編集項目について

フォーム項目「電子メール(確認用)」の編集画面

編集項目「比較する項目のベースネーム」に、比較対象の電子メールのフォーム項目に指定したベースネームを指定してください。

フォーム項目の表示例

フォーム項目「電子メール(確認用)」の表示例

ファイル (CFFileField プラグイン)

ファイル添付 ( input[type=”file”] ) のフォーム項目を追加します。

フォーム項目の編集画面

フォーム項目「ファイル」の編集画面

編集項目について

編集項目「オプション」に、貼付可能なファイルの拡張子を指定できます。また、編集項目「ファイルサイズ上限」に、貼付可能なファイルの上限ファイルサイズを指定できます。

いずれも、編集項目「入力チェック」が ON の時にチェック対象になります。

その他の設定

mt-config.cgi に ContactFormAllowUploadFile 1 を指定する必要があります。

フォーム項目の表示例

フォーム項目「ファイル」の表示例

隠し項目 (CFHiddenField プラグイン)

隠し項目 ( input[type=”hidden”] )のフォーム項目を追加します。既定値に指定した任意の値を送信するために利用したり、JavaScript で組み立てた値を送信するために利用できます。

フォーム項目の編集画面

フォーム項目「隠し項目」の編集画面

テキスト(複数フィールド) (CFTextMultiField プラグイン)

複数のテキスト入力欄をまとめる、テキスト(複数フィールド) のフォーム項目を追加します。

入力画面では、複数の入力項目が表示されますが、確認画面では、それらがすべて結合した文字列になって送信されます。

フォーム項目の編集画面

フォーム項目「テキスト(複数フィールド)」の編集画面

編集項目について

編集項目「オプション」に、入力項目として表示したいラベルを指定します。

フォーム項目の表示例

フォーム項目「テキスト(複数フィールド)」の表示例

パスワード (CFPasswordField プラグイン)

パスワード入力 ( input[type=”password”] ) のフォーム項目を追加します。

パスワード入力欄に加え、パスワード入力確認欄が自動で表示されます。

フォーム項目の編集画面

フォーム項目「パスワード」の編集画面

編集項目について

編集項目「表示数(size)」に、入力できる最大文字数を指定できます。

その他の設定

mt-config.cgi に RequiredPasswordLength を指定すると、パスワードに必要な最小文字数を設定できます。

# 8文字以上の入力を必須にする
RequiredPasswordLength 8

フォーム項目の表示例

フォーム項目「パスワード」の表示例


カテゴリー
PowerCMS 4
プラグイン

Recent Entries