【2026年版・コピペOK】ContactForm7の生年月日プルダウンを動的生成＆年齢自動計算する方法

ContactForm7で生年月日を選択させるフォームを作るとき、こんな問題が起きていませんか？

年数のプルダウンが何十行もズラッと並んで選びづらい
年数を静的に書いていると、年々メンテナンスが必要になる
対象年齢があるのに、対象外の年生まれも選べてしまう
年齢欄を別途設けたいが、手入力させると間違いのもとになる

この記事では、JavaScriptで年数プルダウンを動的に生成しつつ、生年月日の選択と連動して年齢を自動計算・自動入力する実装方法を紹介します。

一度設定してしまえばメンテナンス不要で毎年自動的に対象年数が更新されるため、クライアントサイトへの導入にも向いています。

目次非表示

完成イメージ
実装手順
- Step1｜JavaScriptをページに追加する
- Step2｜ContactForm7のフォームタグを設定する
カスタマイズ例
よくある質問
まとめ

完成イメージ

「年」のプルダウンには、対象年齢（例：18歳〜60歳）の生まれ年のみが自動で並ぶ
「月」「日」は通常のプルダウン
年・月・日を選択するたびに「年齢」欄に自動計算された年齢が入力される
年齢欄はreadonlyで手入力不可

出力イメージ

年数はJavaScriptで動的に生成されるため、毎年自動的に更新されます。
2026年に60歳対象であれば1966年生まれまで、2027年になれば自動的に1967年まで表示が変わります。

実装手順

Step1｜JavaScriptをページに追加する

ContactForm7を設置しているページのヘッダーか、直前に以下のスクリプトを追加します。
カスタムHTMLブロックでも問題ありません。

<script>
// 年数プルダウンの動的生成
var your_date = document.getElementById("your-year");
var minBirthYear = new Date().getFullYear() - 60; // 最高年齢（60歳）の生まれ年
var maxBirthYear = new Date().getFullYear() - 18; // 最低年齢（18歳）の生まれ年

for (var i = maxBirthYear; i >= minBirthYear; i--) {
    your_date.options[your_date.options.length] = new Option(i, i);
}

// 年齢自動計算
jQuery(function($) {
    var yearField  = $('select[name="your-year"]');
    var monthField = $('select[name="your-month"]');
    var dayField   = $('select[name="your-date"]');
    var ageField   = $('input[name="your-age"]');

    var calculateAge = function() {
        var birthDate = new Date(yearField.val(), monthField.val() - 1, dayField.val());
        var nowDate   = new Date();
        var age       = nowDate.getFullYear() - birthDate.getFullYear();

        // 今年まだ誕生日を迎えていない場合は1引く
        if (nowDate < new Date(nowDate.getFullYear(), birthDate.getMonth(), birthDate.getDate())) {
            age--;
        }
        ageField.val(age);
    };

    yearField.add(monthField).add(dayField).change(calculateAge);
});
</script>

設定箇所はここだけ

60 の部分 → 受け付けたい最高年齢に変更してください
18 の部分 → 受け付けたい最低年齢に変更してください

年齢欄が不要な場合は「年齢自動計算」以降のコードをまるごと削除してもOKです。

Step2｜ContactForm7のフォームタグを設定する

CF7のフォーム編集画面に以下を貼り付けます。

<label>生年月日</label>
[select* your-year id:your-year include_blank]年
[select* your-month id:your-month include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月
[select* your-date id:your-date include_blank "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"]日

<label>年齢</label>
[text* your-age readonly]

ポイント

your-year の選択肢はJavaScriptで動的に生成されるため、CF7タグ側では設定不要です
include_blank をつけると最初に空白行（「選択してください」相当）が出ます
your-age は readonly で手入力不可にしています。年齢欄が不要な場合はこの行ごと削除してください

カスタマイズ例

年齢制限なしで使いたい場合

例えば「0歳〜100歳まで全員対象」のような場合は以下のように変更します。

var minBirthYear = new Date().getFullYear() - 100; // 100歳まで
var maxBirthYear = new Date().getFullYear(); // 今年生まれまで

年齢欄を表示せず、年数プルダウンだけ動的にしたい場合

スクリプトの「年齢自動計算」ブロックをまるごと削除し、CF7タグの [text* your-age readonly] の行も削除してください。
年数プルダウンの動的生成だけが動作します。

年・月・日のフィールド名を変えたい場合

スクリプト内の your-year / your-month / your-date / your-age と、CF7タグ内の同じ名前を合わせて変更してください。
どちらか一方だけ変えると動作しなくなります。

よくある質問

年数プルダウンが空のまま表示される: スクリプトの読み込みタイミングがDOMより先になっている可能性があります。
スクリプトを直前に移動するか、
document.addEventListener(“DOMContentLoaded”, …) で囲んでみてください。
また、id:your-year がCF7タグに設定されているか確認してください。