こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
ワードプレスサイトにお問い合わせフォームを導入する際はContact Form 7があれば一瞬で終わります。Contact Form 7開発者は日本の方なのですが、最近では海外でも主流になりつつある注目のプラグインです。海外製の最新有料テーマでもContact Form 7に標準対応していたりとても多くの方に支持されています。ただ利用者が増えると困ってしまうのが「見た目（デザイン）の問題」ですよね。
基本的にぱっと見ただけではContact Form 7かどうか判断はつきませんが、送信ボタンを押してエラーメッセージが出力された際にバレてしまいます。なぜならデフォルトのエラーメッセージが特徴的なデザインだからです。以下の黄色で囲まれたメッセージ。きっと見たことがありますよね？
当研究所ではメッセージ箇所をCSSでデザイン変更をしていますが、読者さんからのリクエストもありプラグイン化を行っています。そこで本日はContact Form 7のエラーメッセージ体裁を変更するプラグイン「Contact Form 7 CSS Message」をご紹介させていただきます。
Contact Form 7の標準出力メッセージ（デザイン）を変更する方法
ではインストールを進めていきましょう。まずは管理画面の「プラグイン > 新規追加」をクリック。
そして、プラグインの新規追加画面が開いたら「プラグインのアップロード」をクリックください。
すると以下の画面が開きます。
そこで事前にダウンロードしたZIP形式のファイルを選択ください。下記キャプチャの通り、ZIPファイルを「ファイルを選択」へ直接ドラッグしてもOK。
そして選択常態になったら「今すぐインストール」をクリックしましょう。
インストールが完了したら「プラグインを有効化」をクリックください。
有効化が完了すると、以下が表示されます。
以上でインストールが完了です。
当プラグインはインストールするだけで特に設定は不要です。有効状態でお問い合わせフォームの送信ボタンをクリックしてみましょう。
ちなみにプラグインを適用する前は以下のデザインでした。
有効化した状態では“エラーメッセージ”が「落ち着いた赤色」へ変わりますのでContact Form 7の標準デザインには見えません。また、必須項目の下側へ表示されるメッセージも矢印マークが付きますので、どのフォームに対するエラーなのかを閲覧者へ明示できるようになりました。
視覚的に理解してもらえるためユーザビリティの向上も期待できますね。もしContact Form 7を導入したけど、メッセージの出力デザインが他社と同じで困っていたという方はぜひ一度お試しくださいませ。
別でContact Form 7の初期設定（ワードプレスで管理者と申込者へ自動返信メールを送信できるお問い合わせフォームを設置する方法）を記事にしていますので併せてご覧ください。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
