【コピペOK】ContactForm7の生年月日の年数選択を動的にする＆年齢自動計算JS

2023年8月23日2023年12月27日

ContactForm7で、「生年月日」の「年数」を選択させる項目があった時、闇雲に幅広い年数を設定しておくと、ものすごいズラ～っとプルダウンメニューが果てしなく並んでしまってユーザーにとって選びづらくなり大変です。

また、サイトを運用していく中で、時間経過とともに対象年齢の生年月日もズレていくので、一定の対象年齢の生年月日だけ選ばせたい場合はこまめにメンテナンスもしないといけません。しかし、更新費などいただけていないクライアントサイトにとってはメンテのしようもなくなるため、困った事態になります。

そういったことから、生年月日を動的に選択できるようにJavaScriptで設定してみました。

また、生年月日選択をしただけで、次のテキスト項目「your-age」という欄に自動計算された年齢が値が渡されるようにも設定しています。

目次非表示

生まれ年対象年齢設定と年齢自動計算用のJavaScirpt
ContactForm7側の設定

生まれ年対象年齢設定と年齢自動計算用のJavaScirpt

下記コードをContactForm7を使用しているヘッダーやページ内に読み込みます。
対象年齢を例えば18歳～60歳にしたい場合は、最低年齢・最高年齢というところに数値を設定してください。

このスクリプトで、その年における対象年齢の生まれ年が自動で出るようになり、かつ、年齢自動計算結果も出るようになっています。

<script>
    var your_date = document.getElementById("your-year");
    var min_year = new Date().getFullYear() - 60; //最高年齢
    var max_year = new Date().getFullYear() - 18; //最低年齢
    var i;
    for (i = max_year; i >= min_year; 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();

            if (nowDate < new Date(nowDate.getFullYear(), birthDate.getMonth(), birthDate.getDate())) {
                age--;
            }

            ageField.val(age);
        }

        yearField.add(monthField).add(dayField).change(calculateAge);
    });

</script>

ContactForm7側の設定

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

見た目の部分は各自classを追加するなどで整えてくださいね♪

生年月日はプルダウン（selectタグ）から選択できます。
your-yearの部分は、JS側で動的に生成されるので、特にContactForm7タグのほうでは設定する必要はありません。

なお、上記はinclude_blankで最初は空白（＝「選択してください」という空行が出てくる）設定にしています。

そして、readonly(編集不可)のテキスト項目を用意してyour-ageとしてあげると、そこにユーザーが選択した生年月日のプルダウンから勝手に計算された年齢の結果が自動的に表示されるようになります。

出力イメージ