Home
CSS
Contact Form7の入力エラー表示をCSSのみでカスタマイズ

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

公開日
2022.04.29
更新日
2024.01.02
Contact Form7の入力エラー表示をCSSのみでカスタマイズ

どうも!かけちまるです!

Contact Form 7の入力エラー表示はデフォルトだとちょっとパッとしないデザインではないですか?

そこで、エラー表示のデザインを変更する方法を解説します。

この記事では、

  • ・どのHTMLにCSSを当てれば良いか
  • ・エラー表示のサンプル

がわかります。

どのHTMLにCSSを当てれば良いか

エラー表示のデザイン変更は既存のHTMLをベースにcssを当てていきます。

CSSを当てるHTMLはお問い合わせフォームにエラーが出るように送信します。
それから、開発者ツールを開いてエラー部分を調べると対象のHTMLがわかると思います。

下画像から分かるように.wpcf7-not-valid-tipにCSSを当てればよさそうですね。

.wpcf7-not-valid-tipにCSSを当てる

エラー表示のサンプル集

各テーマのCSSにこれから紹介するCSSをコピペするとかなりマシなエラー表示になるかと思います。

CSSの微調整は必要かと思いますがその辺はご了承ください。

文字の前にアイコンをつける

アイコンをつけてよりエラー表示っぽくしました。

実装サンプル
“エラーを表示”を押すとエラーが見れます。

    CSS
    コピー
    .wpcf7-not-valid-tip{ box-sizing: border-box; border: 1px solid #f00; color: #f00; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 45px; padding-right: 15px; text-indent: -30px; } .wpcf7-not-valid-tip::before{ content: ""; /* 画像は各自でご用意ください。 */ background: url(./images/warning.svg) no-repeat center/cover; display: inline-block; margin-right: 10px; vertical-align: top; width: 20px; height: 20px; }

    枠線をつけて目立ちやすく

    枠線をつけ、目立ちやすくしました。

    実装サンプル
    “エラーを表示”を押すとエラーが見れます。

      CSS
      コピー
      .wpcf7-not-valid-tip{ box-sizing: border-box; border-radius: 8px; background-color: #fce3e3; border: 2px solid #ba2020; border-left-width: 8px; color: #ba2020; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 45px; padding-right: 15px; text-indent: -30px; } .wpcf7-not-valid-tip::before{ content: ""; /* 画像は各自でご用意ください。 */ background: url(./images/warning.svg) no-repeat center/cover; display: inline-block; margin-right: 10px; vertical-align: top; width: 20px; height: 20px; }

      吹き出し風のエラー表示

      ポップな印象を与えるデザインです。

      実装サンプル
      “エラーを表示”を押すとエラーが見れます。

        CSS
        コピー
        .wpcf7-not-valid-tip{ box-sizing: border-box; border-radius: 5px; background-color: #e50031; color: #fff; display: block; font-size: 14px; font-weight: bold; margin-top: 10px; padding: 10px 10px; position: relative; } .wpcf7-not-valid-tip::before{ content: ""; border: 10px solid transparent; border-bottom: 15px solid #e50031; position: absolute; top: -25px; left: 5%; }

        Contact Form 7関連の記事

        おわり

        かけちまる
        かけちまる
        Webエンジニアをしています。
        HTML/CSS/JavaScript/jQuery/PHPができます。
        WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

        関連記事

        【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

        【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

        【GSAP】registerEffectでアニメーションをテンプレート化する方法

        【GSAP】registerEffectでアニメーションをテンプレート化する方法

        【SVG】vivus.jsで手書き風テキストアニメーションを実装

        【SVG】vivus.jsで手書き風テキストアニメーションを実装

        【基本】Local by FlywheelでWordPressをローカルに構築する

        【基本】Local by FlywheelでWordPressをローカルに構築する

        【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

        【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

        【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

        【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装