【WordPress】Contact form 7でinput[type=”date”]の初期値がスマホで表示されないときの応急処置

投稿日 2025年6月27日
著者ひがし
カテゴリー CSS
カテゴリー WordPress

プラグインContact form 7を使ったフォームのinput[type=”date”]の初期値(年/月/日)がスマホで表示されなかった。デベロッパーツールでは表示されるが、スマホ実機となると表示されない模様。
スマホ実機からフォームを確認すると初期値が空になっていた。

応急処置として、スマホ(とタブレット端末)ではCSSの擬似要素から初期値(年/月/日)を表示させ、jQueryで細かな処理をすることに決まる。

CSSとjQueryの対応の前に

Contact Form 7 は HTML5 の入力タイプをサポートしますか?

はい。Contact Form 7 3.4 以上からこれらの HTML5 入力タイプに対応したフォームタグをサ…

contactform7.com

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

funcsions.phpから有効にしといた。

フォームの設定

input[type=”date”]をラップする要素に、class名「type-val」を追加する。
※今回の場合はtd要素にclass名を追加した。

jQueryの対応

まずはfuncsions.phpにjQueryファイルを読み込む記述を追加。小テーマから読み込んでいるのでget_stylesheet_directory_uri()を使用(親テーマならget_template_directory_uri()に変更する)

wp_enqueue_script( 'js-form', esc_url( get_stylesheet_directory_uri() ) . '/assets/js/form.js', [ 'jquery' ], null, true );

jQueryファイルには、UAの分岐とフォーム操作時の処理を入れる。

(() => {

	jQuery(function($) {

        $( window ).on( 'load', function() {

            const ua = navigator.userAgent;
            if ( ua.indexOf('iPhone') > -1 || ( ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1 )) {
                $( 'body' ).addClass( 'placeholder-custom' );
            } else if ( ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1 ) {
                $( 'body' ).addClass( 'placeholder-custom' );
            } else {
            }

            if( $( '.wpcf7-form' ) ) {
                if ( !$( 'input[type=date]' ).val() ) {
                    $( 'input[type=date]' ).closest('td').removeClass( 'type-val' );
                }
            }
        });

        if( $( '.wpcf7-form' ) ) {
            $( 'input[type=date]' ).on( 'focus', function() {
                $( this ).closest('td').addClass( 'type-val' );
                }).on( 'blur', function() {
                const val = $( this ).val();
                if ( !val ) {
                    $( this ).closest('td').removeClass( 'type-val' );
                }
            });

        }

	});

	
})()

CSS

.placeholder-custom .wpcf7-form-control-wrap input[type="date"] {
	position: relative;
}
.placeholder-custom .wpcf7-form-control-wrap input[type="date"]::before {
	content: attr(placeholder);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: .5em;
}
.placeholder-custom td:not(.type-val) .wpcf7-form-control-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper {
	color: rgba(255,255,255,0);
	opacity: 0;
}
.placeholder-custom td.type-val .wpcf7-form-control-wrap input[type="date"]::before {
	opacity: 0;
}

placeholderを設定しているのでcontentにはattr(placeholder)を入れているけども、placeholderが未設定ならcontent: ‘年/月/日’でいける。

補足

初期値(年/月/日)は予め非表示しておく設計にしておかないと、フォームの確認画面から戻った時に入力値と初期値(年/月/日)が被る恐れがある。

参考URL

placeholderが表示されないinputにplaceholderを表示させる – Qiita

この記事について type="date"にplaceholderを指定しているのに表示されず困った事があったので、その原因と解決方法や調査結果をまとめた記事です。 placehold…

qiita.com