Webフォームにおける日付フィールドは日本語環境とその他の言語で表記の違いが存在するなど、取り扱いが難しいところがあります。
そのため、この記事では Gravity Forms の日付フィールドについて、設定の仕方と注意点を解説します。
日付フィールドを設置する
フォームエディターで「高度なフィールド」から「日付」をドラッグアンドドロップで設置します。
すると以下のように日付フィールドが設置されます。
日付フィールドの設定
このままでは日付の表示形式が mm/dd/yyyy となっており日本では使用しない方式になっているので、以下適宜設定してください。
一般
フィールドのラベル
フィールドの上に表示されたラベルの文言を設定します。デフォルトでは「日付」となっています。
なお、ラベルの表示位置については「外観」の設定で行います。
説明
フィールドの説明を入力してください。ユーザーにフィールドの記入方法やオプションの詳細を示すことができます。
なお、デフォルトではフォームの下に表示されますが、表示の場所については「外観」の設定で行います。
日付入力タイプ
日付フィールドで使用する入力の種類を選択することができます。
- 日付フィールド
日付フィールドではユーザーが自由に日付を入力できます。
下記のキャプチャではプレースホルダーがおかしいので下のプレースホルダー設定で要変更です。
- 日付ピッカー
日付ピッカーではフォームフィールド、またはピッカーアイコンをクリックすることでカレンダーから日付を選択できます。
日付ピッカーのオプションのみアイコンの種類を選択することができます。
注意事項
キーボードまたはスクリーンリーダーに依存しているユーザーは、日付ピッカーにアクセスできません。
フォームのアクセシビリティーを向上させる必要がある場合には、日付ピッカー以外の別の入力タイプを選択してください。
- アイコンなし
- カレンダーアイコン
- カスタムアイコン
日付ピッカーを「カスタムアイコン」に設定するとアイコンの画像パスを入力する欄が表示されます。
画像をギャラリーにアップロードしてURLを入力してください。
注意事項
フォームエディターではカスタムアイコンは表示されません。
プレビューで確認するようにしてください。
- 日付ドロップダウン
年、月、日を別々のドロップダウンで選択する方式です。
日付の書式
日付の書式は、年月日をどのように表示するかを決定します。
例えば、日付ピッカーを使用して日付を決定した後、フォームにどのように入力されるのかを決定します。
以下の7通りの設定が可能ですが、日本語環境では5番目以降（赤で色付け）が現実的だと思います。
- mm/dd/yyyy
- dd/mm/yyyy
- dd-mm-yyyy
- dd.mm.yyyy
- yyyy/mm/dd
- yyyy-mm-dd
- yyyy.mm.dd
サブラベル
日付入力タイプを「日付フィールド」に設定した場合のみ、各入力欄に任意のサブラベルを設定することができます。
注意事項
サブラベルの入力順は、日付の書式がどの設定になっているかに関わらず、以下の順番です。「年」からではないので注意してください。
月
日
年
ルール
ルールの設定は通常のGravity Forms の設定と同様です。
- 必須
- 重複を禁止
外観
プレースホルダー
プレースホルダーは表示するだけで送信はされません。入力が期待される値や入力形式のヒントを表示できます。
プレースホルダーは日付入力タイプの設定によって設定が変わります。
- 日付フィールドと日付ドロップダウンを選択した場合
入力タイプに日付フィールドと日付ドロップダウンを選択した場合は、フィールドが三分割になりますので、プレースホルダーも3つ入力欄が表示されます。
注意事項
- プレースホルダーの入力順は、日付の書式がどの設定になっているかに関わらず、「月」「日」「年」の順番です。「年」からではないので注意してください。
- プレースホルダー欄に何も入れない場合、デフォルトで指定された文字が表示されます。（それが日本語としておかしい場合があります。）
そのため、プレースホルダーを空欄にしたい場合、全角スペースや半角スペースを入力すると、保存後に消えてしまう現象があります。
特に注意したいのは、日付入力タイプを「日付フィールド」に設定した場合です。
この場合、適切なプレースホルダーを設定する方法があまりありません。
- 日付ピッカーを選択した場合
日付ピッカーを選択した場合は、入力欄はひとつになりますので、プレースホルダーの設定も1か所のみになります。
日付ピッカーのプレースホルダーではマージタグと言われるGravity Forms 特有の内部タグを設定することができます。
例えば、{date_mdy} を設定すると MM/DD/YYYY 、{date_dmy} を設定すると DD/MM/YYYY が設定されます。
注意事項
- 残念ながら2022年9月13日現在では {date_ymd} （つまり YYYY/MM/DD）のマージタグは使用できないようです。
- 一般設定の「日付の書式」は YYYY/MM/DD 等が使用できるようになっています。
しかし、プレースホルダーには {date_mdy} （MM/DD/YYYY） および {date_dmy} （DD/MM/YYYY） しか設定できません。MM/DD/YYYY および DD/MM/YYYY をプレースホルダーに設定してしまった場合、プレースホルダーと入力値の書式が異なるケースが発生します。
そのため、日本では一般的な YYYY/MM/DD 等を「日付の書式」で設定した場合など、プレースホルダーは設定しない方がユーザーが混乱しないことが多そうです。
フィールドラベル表示
フィールドラベルを表示するか否かを設定できます。（通常は設定します。）
デフォルトでは表示（上揃え）が設定されています。「表示（上揃え）」と「非表示」が選択可能です。
説明の位置
一般設定で入力できる「説明」をフィールドのどこに表示するのかを設定できます。
- フォーム設定を使用 (フィールドの下)
フォーム設定の「フォームレイアウト」にある「説明の位置」で規定している場所に表示します。
あとで変更したい場合にフォーム一括で変更できるメリットがあります。 - フィールドの下
フィールドの下に説明を表示します。 - フィールドの上
フィールドの上に説明を表示します。
カスタム確認メッセージ
指定した形式ではない様式で日付が入力されていた場合等に入力エラーとして表示する文言を設定することができます。
カスタム CSS クラス
特別なクラスを設定したい場合にここにクラス名を入力します。
高度
管理者用ラベル
フィールドの管理ラベルを入力してください。 Gravity Forms 管理ツールでの表示の際、フィールドラベルはこの管理ラベルで上書きされます。
デフォルト値
フィールドの値を事前に入力する場合はここに入力してください。
表示状態
このフィールドをフロントの画面に表示するかどうかを選択します。
- 表示
デフォルトの設定。フォーム表示時にフィールドを表示します。 - 非表示
フォーム表示時にフィールドを非表示にします。機能としてフィールドが必要で、ユーザーに入フィールドを表示したくない場合に便利です。 - 管理者用
このフィールドは送信された回答の管理時にのみ表示されます。フォームが表示される際には非表示で、機能もしません。
フィールドの動的入力を許可する
このオプションをチェックすると、フォームにデータが渡され、このフィールドに動的に事前入力されるようになります。
データは、クエリ文字列、ショートコード、フックのいずれかを介して渡すことができます。
例えば、getメソッドを使用してクエリ文字列で別のフォームに値を渡したりすることができます。
デモ
以下は実際のGravity Formsのデモになります。
プレースホルダーはCMSLABOとしてはできるだけ使用しないようにしておりますが、日付フィールド形式のみ適切なプレースホルダーがありませんのでYYYY MM DDを設定してあります。
投稿者プロフィール
- DoL（CMSラボ所長）
-
CMS Laboの所長。
所員はまだない。
DoLは Director of Laboratories の略です。
最新の投稿
GravityForms2023年2月13日スパムハニーポットの機能強化
GravityForms2023年2月10日ブロックのテーマとスタイルの設定
GravityForms2023年2月9日Gravity Formsのテンプレートライブラリを利用する
GravityForms2023年2月8日Gravity Forms セットアップウィザード
