生年月日項目について

Contact Form 7に生年月日の入力に最適化された「年」「月」「日」の3項目からなるドロップダウンメニューを追加します。

生年月日項目

Wattsの生年月日項目の特徴

生年月日の入力に特化

Contact Form 7の提供する「日付」タグはあくまで汎用的な日付の入力タイプです。

入力フォームの中でも日付の扱いは難しいと言われていて、1つのUIで全ての問題を解決できません。そのため「何を重視するか」によって最適なUIが変わります。

Wattsでは生年月日の入力に適したドロップダウンメニューのUIを提供します。

年が降順

「年」が降順のドロップダウンメニューとなっています。

つまり、若い人ほど自分の生まれた年が上に表示される(スクロール量が少なくなる)ので、UXが向上します。

このUIはTwitterなどのモダンなWebサービスでも採用されています。

ドロップダウンメニューで選択可能な値を自動設定

年月日のドロップダウンメニューを自動で作成します。毎年、「年」の値を保守する必要はありません。

「年」は現在の西暦から(おおよその寿命である)過去120年分を選択することができます。

年月日をまとめて処理

年月日をまとめて処理するので、以下のメリットがあります。

  • 年月日のチェックが可能
  • 年月日を1つの項目として出力可能

仕様

説明が必要な仕様について記載します。

日付フォーマット

代表的な日付フォーマットに対応しています(v1.1.2~)。

以下の分布を参考に、想定するユーザーに対応した日付フォーマットを選択してください。

Date format by country – Wikipedia

YMD

年/月/日です。

(例)1941年6月2日 → 1941/6/2

MDY

月/日/年です。米国ローカル方式として知られています。

(例)1941年6月2日 → 6/2/1941

DMY

日/月/年です。 欧州ローカル方式として知られています。

(例)1941年6月2日 → 2/6/1941

日付区切り文字

以下の区切り文字に対応しています

  • スラッシュ
  • ダッシュ(ハイフン)
  • ピリオド
  • カンマ
  • 空白

使い方

フォームタグに生年月日が追加されるので、他のフォームタグと同様に使用してください。

グループに対するラベル

ラベルが必要な場合、fieldsetタグを使用してください。labelタグは1つの入力項目に対してのみ有効なので、3項目からなる生年月日項目には使用できません。

<fieldset>
    <legend>生年月日</legend>
    [dob your-dob]
</fieldset>

個々のラベル

「空の項目を先頭に挿入する」オプションを有効にすることで、それぞれの入力項目の先頭に「年」「月」「日」が挿入されます。

生年月日 項目名
「空の項目を先頭に挿入する」オプション 選択時の見た目

labelタグについては3つのドロップダウンメニューを隣接して表示する仕様上、あまり考慮していません。一応、ID属性を設定することでそれぞれの入力項目に固有のID(末尾に「-year」 「-month」 「-day」が付与されます )が割り振られるので、labelタグのfor属性でそれらを指定することが可能です。