2025.02.05
ContactForm7で年月日のセレクトボックスを自動で追加する方法
はじめに
今回は、ContactForm7で年月日のセレクトボックスを自動で追加する方法についての備忘録です。
ContactForm7のデフォルトフォームには「日付」フィールドがありますが、生年月日の入力にはセレクトボックスの方が使いやすいため、ぜひ参考にしてください。
実装コード
ContactForm7の記述
<div class="select select-date">
<div class="year">[select* select-year id:select-year data:select-year first_as_label "-"]年</div>
<div class="month">[select* select-month id:select-month data:select-month first_as_label "-"]月</div>
<div class="day">[select* select-day id:select-day data:select-day first_as_label "-"]日</div>
</div>年月日それぞれのセレクトボックスを用意します。
nameやidの箇所は後のfunctions.phpやjQueryにも影響するので、変更する際は後の記述も同様に変更してください。
functions.phpの記述
//========================================================================
// contact form7 - select 年月日 自動追加
//========================================================================
/* --- 年（select-year）にoptionを追加 --- */
function custom_get_select_values_year( $values, $options, $args ) {
if ( in_array( 'select-year', $options ) ) {
$now_year = date('Y');
// 年齢制限
$min_year = 0; // min制限
$max_year = 99; // max制限
// $values = range( $now_year-$max_year, $now_year-$min_year, 1 ); // 昇順
$values = range( $now_year-$min_year, $now_year-$max_year, -1 ); // 降順
}
return $values;
}
add_filter( 'wpcf7_form_tag_data_option', 'custom_get_select_values_year', 10, 3 );
/* --- 月（select-month）にoptionを追加 --- */
function custom_get_select_values_month( $values, $options, $args ) {
if ( in_array( 'select-month', $options ) ) {
$values = range( 1, 12 );
}
return $values;
}
add_filter( 'wpcf7_form_tag_data_option', 'custom_get_select_values_month', 10, 3 );
/* --- 日（select-day）にoptionを追加 --- */
function custom_get_select_values_day( $values, $options, $args ) {
if ( in_array( 'select-day', $options ) ) {
$values = range( 1, 31 );
}
return $values;
}
add_filter( 'wpcf7_form_tag_data_option', 'custom_get_select_values_day', 10, 3 );ContactForm7が提供するフィルターフック 「wpcf7_form_tag_data_option」 を使用して、年月日のセレクトボックスに option を動的に追加します。
採用サイトなどでは年齢制限を設定する必要がある場合もあるため、コメントアウトを参考にカスタマイズしてください。
CSSの記述
.select-date,
.select-date > * {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.select-date {
gap: 12px;
}
.select-date > * {
gap: 4px;
}シンプルな年月日を横並びにするCSSです。必要に応じてカスタマイズしてご利用ください。
jQueryの記述
/* 年月日 - 年・月に合わせた日時表示
*************************************************** */
$(document).on('change','#select-year,#select-month',function(){
$('#select-day option').show();
$selected_year = $('#select-year option:selected').val();
$selected_month = $('#select-month option:selected').val();
// 2月 - 閏年は28日まで、それ以外は29日まで
if ( $selected_month == 2 ) {
$('#select-day option[value="31"]').hide();
$('#select-day option[value="30"]').hide();
$('#select-day option[value="29"]').hide();
if( $selected_year && ( (Math.floor($selected_year%4 == 0)) && (Math.floor($selected_year%100 != 0) ) || ( Math.floor($selected_year%400 == 0) ) ) ){
$('#select-day option[value="29"]').show();
}
}
// その他 4,6,9,11月は30日まで
else if ( $selected_month == 4 || $selected_month == 6 || $selected_month == 9 || $selected_month == 11 ) {
$('#select-day option[value="31"]').hide();
}
});年によっては2月は閏年があり、月によっては日数が30日と31日で変動があるため、「日」のoptionをjQueryで整えます。
実際のページで問題なく動いていたら作業は完了となります。