WordPress上で設置したフォームについての備忘録です。
今回Contact form7というWordPressのお問い合わせフォームのプラグインを使用して、input type=”date”のボタンを使用したんですが、iPhoneから見た時だけ入力欄がめちゃくそ小さくてわかりづらかったので、CSSで対処しました。
ちなみにAndroidでは大丈夫でした。
目次
どういう状態か
まずパソコンで見たときは普通に年/月/日/という文字が表示されていて、ボタンであることがわかる状態です。(ChromeでもSafariでも問題ない)ここは問題ありません。
しかしiPhoneのsafari、Chromeどちらで見ても、このような画像状態で、ボタンらしさはありません。
これではお客さんが使いづらいので、修正します。
疑似要素でテキストを入れることで対処可能
他にも対処方法はあるのかもしれませんが、単純にwidth: 100%;にしたところで、ただグレーのバーが横に伸びるだけですので、疑似要素で文字を入れて、選択を促すことにしました。
使ったCSSはこちら(Contactform7専用)
CSS
@media screen and (max-width: 850px){
.wpcf7-date{
width: 80% !important;
margin: 0 0 10px 0;
}
.wpcf7-date::before{
content: '日付を選択する';
font-size: 12px;
}
}
WordPressのContact form7のインプットタグに合わせて書いてますので、このプラグインを使用されていない方はご自身のinput type=”date”のタグに書き換えて使用してください。
完成した状態はこちら
これで日付の選択を促すことが出来ていると思います。
疑似要素なのでこのコメント文がメールフォームで送信されることはありません。一応、送受信の確認はしてくださいね。