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. GoogleAnalyticsのアップデートで期間が1週間に設定されている!?デフォルト期間の変更方法はこちら
  2. ネットショップを利用しない人は「現物を確かめて買い物がしたい」らしい

    WEB制作

    ネットショップを利用しない人は「現物を確かめて買い物がしたい」らしい

    先日発表されたニュース、【ネット通販の不満は何ですか? 「送料…

  3. WordPressなら見積もりフォームも簡単に作れるプラグインがあるよ

    WEB制作

    WordPressなら見積もりフォームも簡単に作れるプラグインがあるよ

    もしかしたらと思って探してみたらやっぱりありました。W…

  4. ヤフーショッピング出店手数料

    WEB制作

    ヤフーショッピングに出店してみた!費用・手数料・申込み方法は?

    革革命という革製品を販売しているサイトを運営しているのですが、この度ヤ…

  5. マーケティング

    WEB制作

    企業が今後最も強化・注力したいマーケティング施策とは

    職業柄とても興味深いデータが公開されておりましたので引用。広告でも…

  6. WEB制作

    WordPress投稿をFacebookでシェアする時の画像がおかしい時はこれで解決!

    Facebookでシェアする時に意図しない変な画像で表示される…



最近の記事

  1. 2017年7月1日から香寺町のテニスコートや野球場、スポーツジム等の料金が上がる!
  2. カツ丼の看板がやたら目を引いたので入ってみた!姫路のカツ丼屋さん「カツ善」
  3. ヤフーショッピング出店手数料
  4. 姫路 畳座
  5. WordPressなら見積もりフォームも簡単に作れるプラグインがあるよ
  1. クリップ

    フリーランス

    商品開発者求む!と思ったら既に製品化されていた!冬でも朝まで快適に寝られるアイテ…
  2. 食レポ

    La Diablinna(ラ・ディアブリーナ)|三宮 ランチ
  3. 革革命 アクセスデータ

    WEB制作

    ネットショップを立ち上げて2ヶ月ほど経ったのでいろいろ報告
  4. 日記

    学園都市駅前でコワーキングスペースを探した結果
  5. 香寺町

    日記

    老後に住むなら姫路市の香寺町は「ちょうどいい」場所である
PAGE TOP