2026.02.13

Contact Form 7 で生年月日を入力させる3つの方法（select / date / 自動生成）

WordPress

WordPressプラグイン「Contact Form 7」で、
生年月日を入力してもらいたい場合の3つの実装方法を紹介します。

ドロップダウンメニュー（select）で選択する方法

もっともシンプルで、確実に動作するのがこの方法です。
あらかじめ用意した候補の中から、年・月・日を選んでもらいます。

<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>

<dd>

[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から選択してもらう方法です。
スマホでは特に入力しやすいのが特徴です。

<dl class="cf7-dl">
  <dt>生年月日</dt>
  <dd>[date* date-birth min:1966-01-01 max:2008-01-01 "2000-01-01"]</dd>
</dl>

<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 側の記述例

<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>