![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
ContactForm7で年月日のセレクトボックスを自動で追加する方法 ｜株式会社GROW（グロウ）
grow4happy.com
WordPressプラグイン「Contact Form 7」で、
生年月日を入力してもらいたい場合の3つの実装方法を紹介します。
ドロップダウンメニュー（select）で選択する方法
もっともシンプルで、確実に動作するのがこの方法です。
あらかじめ用意した候補の中から、年・月・日を選んでもらいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<dl class="cf7-dl"> <dt>生年月日</dt> <dd> <div class="form-birthday"> <div class="form-birth-year"> [select* select-year id:select-year "2000" "2008" "2007" "2006" "2005" "2004" "2003" "2002" "2001" "1999" "1998" "1997" "1996" "1995" "1994" "1993" "1992" "1991" "1990" "1989" "1988" "1987" "1986" "1985" "1984" "1983" "1982" "1981" "1980" "1979" "1978" "1977" "1976" "1975" "1974" "1973" "1972" "1971" "1970" "1969" "1968" "1967" "1966" ]年 </div> <div class="form-birth-month">[select* select-month id:select-month "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月</div> <div class="form-birth-date">[select* select-date id:select-date "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日</div> </div> </dd> </dl> |
この設定でできること
- 年：2008年（2026年時点で18歳）～1966年（60歳）まで選択可能
- 初期値：2000年
- 月：1～12
- 日：1～31
カレンダー（date）から選択する方法
ブラウザのカレンダーUIから選択してもらう方法です。
スマホでは特に入力しやすいのが特徴です。
|
1 2 3 4 |
<dl class="cf7-dl"> <dt>生年月日</dt> <dd>[date* date-birth min:1966-01-01 max:2008-01-01 "2000-01-01"]</dd> </dl> |
この設定でできること
- 1966年1月1日～2008年1月1日まで選択可能
- 初期値：2000年1月1日
直接日付を指定したい場合に便利です。
※この指定は誕生日単位での厳密な年齢判定ではなく、
指定した日付範囲に含まれる生年月日を制限する方法です。
年月日を自動で生成する方法（functions.php + jQuery）
年齢制限を毎年自動で更新したい場合は、PHPで選択肢を生成する方法が便利です。
例えば「18歳以上60歳以下」といった条件でも、
現在の西暦を基準に自動計算されるため、年が変わっても修正は不要になります。
運用時の更新作業や設定ミスを防げる点が大きなメリットです。
Contact Form 7 側で年・月・日のセレクトボックスを用意し、
functions.php で最小年齢 / 最大年齢から選択肢を生成します。
さらに jQuery によって、うるう年や月ごとの日数（30日 / 31日）を自動で出し分けます。
Contact Form 7 側の記述例
|
1 2 3 4 5 6 7 8 9 10 |
<dl class="cf7-dl"> <dt>生年月日</dt> <dd> <div class="form-birthday"> <div class="form-birth-year"[select* select-year id:select-year data:select-year first_as_label "2000"]年</div> <div class="form-birth-month">[select* select-month id:select-month data:select-month first_as_label "1"]月</div> <div class="form-birth-date">[select* select-day id:select-day data:select-day first_as_label "1"]日</div> </div> </dd> </dl> |
実装の詳しいコードや具体的な手順については、以下の記事が非常に分かりやすくまとめられています。
より詳細に実装したい場合は、あわせて参照してみてください。
まとめ
Contact Form 7 で生年月日を入力してもらう方法には、いくつかのパターンがあります。
- 手軽に設置できる select（ドロップダウン）形式
- 入力しやすい date（カレンダー）形式
- 年齢条件を自動更新できる PHP + jQuery による自動生成
運用の手間を減らしたい場合や、毎年の設定変更をなくしたい場合は、
自動生成の仕組みを取り入れるのがおすすめです。
用途や管理体制に合わせて、最適な方法を選んでみてください。