クライアントサイトで驚きの不具合発見。
WordPressの更新やコンタクトフォームの更新で発生したことなのかはわからないが、スマホとタブレットでのみコンタクトフォームの送信ボタンが表示されていないという致命的な不具合。
調べてみると、
iPhoneのSafari、ChromeでNG。
iPadのSafari、ChromeでもNG。
MacのSafari、Chromeでは表示OK。
スマホやタブレットでも非表示にはなっているが、送信ボタンがあるような空白はある。
つまり、スマホ・タブレットでの表示時のみボタンの背景色が白になっているような感じなのである。
予想通りタップしてみるとPCで言うマウスオーバー時の背景が表示される。おそらくCSSの問題だ。
テーマが閲覧端末でCSSを振り分けてるのかな？iPadの横表示ではPCと同じ表示になるようにしてたんだが、、、よくわからない。
WEB上を探しても同様の不具合を探すことができなかったので、使用しているテーマ特有のCSSバグだったのかも知れない。
ということで「コレ追記すればかっこいいボタンになるよ」ってコードを追記してみたら、スマホ・タブレット共に送信ボタンが表示された。
コンタクトフォームの送信ボタン表示用コード
同じような症状でお困りの方は、下記CSSを使用中テーマのstyle.cssの末尾にでも追記しておけば大丈夫です。
もちろん、フォントサイズやボタンの背景色はサイトに合ったものに編集してください。
.wpcf7-submit {
font-size: 17px;
padding: 3px 25px;
background: #e9e9e9;
color: #363B3F;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: solid 4px #dcdcdc;
}
.wpcf7-submit:hover {
background-color: #dcdcdc;
color: #dc143c;
}
※コンタクトフォーム本体のCSSに書き込んでも大丈夫ですが、プラグインの更新時にCSSファイルが上書きされてしまう可能性もあるので要注意です。テーマファイルに追記しておくほうが無難です。
一瞬焦ったけど、なんとか復旧できたのでよかったよかった。
