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を開発した方はやはり素晴らしいですね。
今のところやりたいことは全て出来そうです。

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

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

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

関連記事

A8の登録方法について

副業でアフィリエイトを始めたい人向け!必ず登録しておきましょう はじめに アフィリエイト

記事を読む

youtubeの動画をダウンロードする方法

この動画が削除される前にダウンロードしておきたいって動画や、編集したいと言う動画がyoutubeにあ

記事を読む

ワードプレスのログイン画面のロゴを変更する方法

ワードプレスのログイン画面のロゴをオリジナルのものにする際のカスタマイズ方法をご紹介いたします。

記事を読む

ワードプレスでメルマガが使えるSubscribe2

無料でメルマガを使う事が出来るワードプレスのプラグインSubscribe2のご紹介です。

記事を読む

contact form 7で自動返信メールのカスタマイズ

ワードプレスでのお問い合わせフォームcontact form 7を導入後に、必ずやっておきたい自動返

記事を読む

スパムコメントを自動で削除してくれるAkismet

ワードプレスをインストール時に最初からインストールされているAkismetの使い方をご紹介いたします

記事を読む

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

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

記事を読む

ワードプレスの管理画面でチェックできるアクセス解析

今まで使っていたアクセス解析がデータが蓄積されていくタイプなので、少し重いなと感じるようになりました

記事を読む

カスタムメニューのナビゲーションラベル文字化け

カスタムメニューを利用しようとしたら文字化けで使えなかった件 はじめに ワードプ

記事を読む

Jetpackの統計情報

ワードプレスにJetpackを利用するきっかけとなった機能の一つがこの統計情報です。 はじめに

記事を読む

Message

現在の総記事数: 316件

ECCUBEの検索に商品IDを追加させる方法

ECCUBEはデフォルトだと検索機能は非常に弱いです。 はじめに

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

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

windows10のおすすめを非表示にする方法

windows10に変わってからめっちゃうっとおしくなってきましたね

PHPの中にPHPを入れたい人の為のヒント

PHP初心者によくある疑問点PHPの中にPHPを入れる事が出来れば

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

Contact Form 7を利用している方でエラー項目をよりわかりや

→もっと見る

PAGE TOP ↑