WEB制作

スマホとタブレットだけContact Form 7の送信ボタンが表示されない不具合発生!解決方法はこちら

人気のおすすめ記事

  1. 「ないものはない」海士町で移住体験してきたけど・・・
  2. 神戸三宮。1人でフラッと軽くワイン飲みたい時にはBinoBinoしかない
  3. 動物とふれあい放題の神戸どうぶつ王国を徹底解剖!子どもが喜ぶスポット間違いなし

クライアントサイトで驚きの不具合発見。
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ファイルが上書きされてしまう可能性もあるので要注意です。テーマファイルに追記しておくほうが無難です。

一瞬焦ったけど、なんとか復旧できたのでよかったよかった。

お役立ち情報をもう1記事読んでみませんか

  1. ビジネスマン必見!初めてカプセルホテルに泊まってみたら・・・
  2. 究極のモフモフ体験はこちらからどうぞ
  3. 土日に役立つ兵庫県内のおすすめ遊びスポット

関連記事

  1. オリジナルのドメインを取得してホームページを作ろう

    WEB制作

    オリジナルのドメインを取得してホームページを作ろう

    ドメインとはドメインとはインターネット上の住所みたいなものです…

  2. GENKINGがGoogleはSEOがどうのこうの言ってInstagramクルー!とか言ってるが
  3. マクドナルドならでは!Googleアドワーズ広告の攻め方がスバラシイ

    WEB制作

    マクドナルドならでは!Googleアドワーズ広告の攻め方がスバラシイ

    PCやスマホでいろんな情報サイトを閲覧しているとよく表示されているのが…

  4. WEB制作

    宇宙一のSEOキング

    宇宙一のSEOキング情弱の方をダマしてお金儲けしている…

  5. 管理しているサイトでは前年と比べてもモバイル比率がほぼ変わってなかった

    WEB制作

    管理しているサイトでは前年と比べてもモバイル比率がほぼ変わってなかった

    自分の管理しているWEBサイトの手入れとか解析ってどうしても後手後手に…



最近の記事

  1. WordPress
  2. 湘南らあめん 頂(いただき)
  3. 2017年7月1日から香寺町のテニスコートや野球場、スポーツジム等の料金が上がる!
  4. カツ丼の看板がやたら目を引いたので入ってみた!姫路のカツ丼屋さん「カツ善」
  1. 食レポ

    激安 おすすめ マーヤカレー|三宮 ランチ
  2. グルーポンのいい活用例を見た!長田の山の上にあるベジタブルカフェ トトロ でランチってきた

    食レポ

    グルーポンのいい活用例を見た!長田の山の上にあるベジタブルカフェ トトロ でラン…
  3. 食レポ

    神戸市役所向かい はな咲輝(はなさき)|ランチ 三宮
  4. マラソン超初心者が神戸マラソン2016でフルマラソンを走破した結果が痛々しい

    日記

    マラソン超初心者が神戸マラソン2016でフルマラソンを走破した結果が痛々しい
  5. カツ丼の看板がやたら目を引いたので入ってみた!姫路のカツ丼屋さん「カツ善」

    食レポ

    カツ丼の看板がやたら目を引いたので入ってみた!姫路のカツ丼屋さん「カツ善」
PAGE TOP