WordPressプラグイン Contact Form 7 誕生日自動計算機能を追加する

コンタクトフォームに書くコード

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 計算ボタンの要素を取得
        var calculateButton = document.getElementById('calculateAge');

        // ボタンがクリックされたときの処理
        calculateButton.addEventListener('click', function () {
            // 誕生日の入力値を取得
            var birthdayInput = document.querySelector('input[name="birthday"]');
            var birthdayValue = birthdayInput.value;

            // 入力情報の確認
            if (birthdayValue) {
                var birthday = new Date(birthdayValue);
                var today = new Date();
                var age = today.getFullYear() - birthday.getFullYear();

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

                // 年齢を年齢フィールドに追加
                var ageField = document.querySelector('input[name="age"]');
                ageField.value = age;
            } else {
                alert('誕生日を入力してください。');
            }
        });
    });
</script>

<table>
    <tbody>
        <tr>
            <th>誕生日</th>
            <td>[date* birthday date min:1900-01-01]
                <button type="button" id="calculateAge">
                年齢を計算
                </button>
            </td>
        </tr>
        <tr>
            <th>年齢</th>
            <td>[number* age readonly]</td>
        </tr>
    </tbody>
</table>

JavaScriptにpタグ、brタグが勝手生成される場合

wp-config.php最終行コードの上に下記コードを追加する

define ('WPCF7_AUTOP', false);