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. WEB制作

    WordPressで投稿カテゴリーごとにテンプレートを変更する方法

    WordPressを使ったサイト作成をしていてよくあるのが「ブログには…

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

    WEB制作

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

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

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

    WEB制作

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

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

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

    WEB制作

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

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



最近の記事

  1. ヤフーショッピング出店手数料
  2. 姫路 畳座
  3. WordPressなら見積もりフォームも簡単に作れるプラグインがあるよ
  4. スマホとタブレットだけContact Form 7の送信ボタンが表示されない不具合発生!解決方法はこちら
  5. 神戸マラソンにふるさと納税枠!先着200人まで10万円で確実に走れるよ!
  1. 仕事ができる人は日々進化しながら今を生きている!というのをテニスで感じた

    日記

    仕事ができる人は日々進化しながら今を生きている!というのをテニスで感じた
  2. ぼっかけラーメン

    食レポ

    神戸三宮の地下街サンチカ麺ロード内にある「さんげん 縁(えにし)」に行ってきた
  3. 神戸市垂水区桃山台の本格インドカレー専門店まいたに行ってきた

    食レポ

    神戸市垂水区桃山台の本格インドカレー専門店まいたに行ってきた
  4. ブランチ学園都市にあるCAFE PICNICでランチ

    食レポ

    ブランチ学園都市にあるCAFE PICNICでランチ
  5. WEB制作

    尖ったアイテムのみを取扱っている革革命WEBサイトがOPENしました
PAGE TOP