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. ホームページの上位表示に大きく左右されるかも知れないGoogleモバイルフレンドリーってなに

    WEB制作

    ホームページの上位表示に大きく左右されるかも知れないGoogleモバイルフレンドリーってなに

    たまにはメシネタ以外も発信しておきたいと思います。最近話題にな…

  2. 顧客視点に欠けている経営者に告ぐ!今の時代ホームページは携帯電話と同じで必要経費である

    WEB制作

    顧客視点に欠けている経営者に告ぐ!今の時代ホームページは携帯電話と同じで必要経費である

    携帯電話が必要なようにホームページも必要な時代なのですその昔、…

  3. 楽天市場の商品検索は非常に使いにくいのでアクセスを増やすには価格設定が大きく影響する

    WEB制作

    楽天市場の商品検索は非常に使いにくいのでアクセスを増やすには価格設定が大きく影響する

    最近はネットで買い物するとなるとまずamazon。2〜3年前までなら楽…

  4. 革革命 アクセスデータ

    WEB制作

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

    昨年の11月に勢いで立ち上げた革革命ですが、ほぼ更新なしですがいい勢い…

  5. WEB制作

    Facebookで友達削除予告する「かまってちゃん」がメンドクサイ

    Facebookでたまに見かけるのが「より繋がりの濃い…

  6. キーワードプランナーで月間検索ボリュームを従来通り閲覧する方法

    WEB制作

    キーワードプランナーで月間検索ボリュームを従来通り閲覧する方法

    キーワードプランナーやキーワードアドバイスツールで月間平均検索ボリュー…



最近の記事

  1. WordPress
  2. 湘南らあめん 頂(いただき)
  3. 2017年7月1日から香寺町のテニスコートや野球場、スポーツジム等の料金が上がる!
  4. カツ丼の看板がやたら目を引いたので入ってみた!姫路のカツ丼屋さん「カツ善」
  5. ヤフーショッピング出店手数料
  1. 名谷パティオのえびす丼についてる赤だしがプラス100円で巨大あら汁に大化け

    食レポ

    名谷パティオのえびす丼についてる赤だしがプラス100円で巨大あら汁に大化け
  2. 神戸市垂水区 名谷インターすぐのカフェルードで日替わりランチを食べてきた

    食レポ

    神戸市垂水区 名谷インターすぐのカフェルードで日替わりランチを食べてきた
  3. 日記

    学園都市駅前でコワーキングスペースを探した結果
  4. 三宮でゆっくりコーヒー飲むなら隠れ家的に使えるカフェPocket(ポケット)へ

    食レポ

    三宮でゆっくりコーヒー飲むなら隠れ家的に使えるカフェPocket(ポケット)へ
  5. なぜバイラルメディアがゴミなのかがよくわかるように説明しようと思います

    WEB制作

    なぜバイラルメディアがゴミなのかがよくわかるように説明しようと思います
PAGE TOP