Contact Form 7のエラー項目を分かりやすく方法

公開日: : 最終更新日:2018/02/10 副業で稼ぐ仕組みの作り方 ,

Contact Form 7を利用している方でエラー項目をよりわかりやすくさせる方法をご紹介いたします

はじめに

ワードプレスのプラグイン、コンタクトフォーム7はデフォルトのままではエラー項目が分かりくく感じられる方がいらっしゃるようです。

そこで、より分かりやすくカスタマイズする方法をご紹介させて頂きます。

注意事項

プラグインのアップデートで変わる可能性があるので、アップデート後は必ずチェックしましょう

記入もれをもっとわかりやすく

コンタクトフォーム7の場合、必須項目に記入がなく、そのまま送信ボタンを押すと

必須項目に記入もれがあります。

と言う表示が出ます。
記入ボックスのすぐ下に表示されるのでわかりにくいと感じる方はいらっしゃらないと思いますが、記入もれがあるボックス自体の色を変えた方が直感的にわかるなと思いました。

また、コンタクトフォーム7の欠点と言えばラジオボタンです。

ラジオボタンは簡単に言えばもともとが必須項目ですよね。

デフォルトではラジオボタンは選択されていない状態で、送信ボタンを押しても

必須項目に記入もれがあります。の表示が出ないんです。

そこで、とあるカスタマイズをする事でこの辺りも解決する事が出来ました。

cssに記載しよう

コンタクトフォーム7自体のcssをいじるとアップデートで情報が消えてしまうので、WEBページの方に記載しましょう。

.wpcf7 .wpcf7-not-valid {
    background: pink;
}

こちらの情報をcssに入力する事でこんな感じになりました。

カスタマイズ前

カスタマイズ後

どうでしょうか?
必須項目のエリアも背景の色が変わったのでわかりやすく、またラジオボタン側も色が変わり、なぜか「必須項目に記入もれがあります。」の文章が表示されるようになりました。

以上でコンタクトフォーム7のエラー項目をより分かりやすく方法の説明を終了致します。

さいごに

やりたい事はある程度出来る

コンタクトフォーム7を開発した方はやはり素晴らしいですね。
今のところやりたいことは全て出来そうです。

使い勝手もかなり良いのですが、問題はメールアドレスくらいでしょうか

これは使っている人からすると絶対にわかってくれると思います。

また違う重要なカスタマイズがあればブログ記事にしたいと思います。

関連記事

ECCUBE2.12のカテゴリに子カテゴリを表示させる方法

EC-CUBEで孫カテゴリまで作ったならこのカスタマイズが必要です はじめに と

記事を読む

データベースのテーブルの追加と削除

もとからあるシステムのデータベースをいじるのって素人には勇気がいる内容ですよね。 はじめに EC

記事を読む

Contact Form 7の送信元をメールアドレスにする方法【さくら】

コンタクトフォーム7からのメールのメールアドレスと送信元が違うケースって結構ありますよね。 はじめ

記事を読む

phpとワードプレスのランダム表示

副業で広告やバナーを掲載する時にランダム表示をしたいなぁって時に役立つ内容を紹介します。 はじめに

記事を読む

EC-CUBEで各カテゴリーページに情報を表示させる方法

EC-CUBEでカテゴリーページごとに情報を入れる方法をご紹介 はじめに EC-CU

記事を読む

クリックで位置を強調する方法

プレゼンテーションや画面が小さい時に役立つ強調系ソフト紹介です。 はじめに 副業でよくある動画コ

記事を読む

ECCUBE3をさくらにインストールしたよ

ECCUBE3の情報がまだまだ圧倒的に少なかったので、自分がさくらサーバーにインストール時に苦労した

記事を読む

無料ECサイトカスタマイズ

前回お話した無料でECサイトが3分で作れるのデザインなどのカスタマイズ方法についてご紹介いたします。

記事を読む

特定のユーザーのみ反映するカスタマイズ方法

ワードプレスでは管理画面の情報をいじると全てのユーザーが影響を受けてしまいますがカスタマイズする事で

記事を読む

no image

FFFTPの設定

FFFTPの設定はサーバーをレンタルする毎にしなければいけません。設定自体は特別必要な知識や技術はな

記事を読む

Message

現在の総記事数: 321件

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 はじめに

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

PHPのランダムを任意の数だけ表示させる方法

PHPのランダムを使い方をもう少し調べたらこんな使い方ができました

ECCUBEのポイント関連のバグ

最終保持ポイントがマイナス表示にならないように調整して下さい。って出て

→もっと見る

PAGE TOP ↑