お問い合わせフォーム WordPress

【Contact Form 7】送信成功やエラーメッセージを非表示にする方法

2022年5月18日

※ 当サイトではアフィリエイト広告を利用しています

Contact Form 7でエラーや送信成功のメッセージって非表示に出来る?

Contact Form 7では必須項目が入力されていない状態で送信ボタンをクリックすると、エラーメッセージが自動で表示されます。

また、送信が成功した時も自動でメッセージが表示されます。

しかしこれを『非表示にして下さい』と実務では言われることがあります。

今回はこれらのメッセージを非表示にする方法をご紹介します。

Contact Form 7の基本的な使い方については以下の記事を参照下さい。

あわせて読みたい
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

じゅんぺいブログは、Web制作コーディングWordPress制作)の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください!
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

Contact Form 7で送信成功やエラーメッセージを非表示にする方法

Contact Form 7が自動で表示するメッセージは3種類あります。

  • 必須項目未入力の時に項目下に表示されるメッセージ
  • 必須項目未入力の時に送信ボタン下に表示されるメッセージ
  • 送信成功した時に送信ボタン下に表示されるメッセージ

最初の『必須項目未入力の時に項目下に表示されるメッセージ』を非表示にすることはあまりないと思いますが、これを非表示にする方法もご紹介します。

全てCSSにコードを追記するだけでOKです。

 

必須項目未入力の時に『項目下』に表示されるメッセージを非表示

これは以下のようなメッセージです。

Contact Form 7:必須項目未入力の時に『項目下』に表示されるメッセージ

Contact Form 7:必須項目未入力の時に『項目下』に表示されるメッセージ

これは各入力項目の下に表示されます。

非表示にするコードはこちらです。

.wpcf7-not-valid-tip {
  display: none;
}

この次の『必須項目未入力の時に送信ボタン下に表示されるメッセージ』も一緒に非表示にしてしまうと、エラーメッセージが一切表示されずなぜ送信出来ないのか分からなくなるのでご注意ください。

 

必須項目未入力の時に『送信ボタン下』に表示されるメッセージを非表示

これは以下のようなメッセージです。

Contact Form 7:必須項目未入力の時に『送信ボタン下』に表示されるメッセージ

Contact Form 7:必須項目未入力の時に『送信ボタン下』に表示されるメッセージ

先ほどの『必須項目未入力の時に項目下に表示されるメッセージ』が表示されれば、こちらは非表示にしてもいいかと思います。

非表示にするコードはこちらです。

.wpcf7-form.invalid .wpcf7-response-output {
  display: none;
}

 

送信成功した時に『送信ボタン下』に表示されるメッセージを非表示

これは以下のようなメッセージです。

Contact Form 7:送信成功した時に『送信ボタン下』に表示されるメッセージ

Contact Form 7:送信成功した時に『送信ボタン下』に表示されるメッセージ

これはサンクスページがなければ表示された方がいいですが、サンクスページがある場合はサンクスページに遷移するまでの時間にちょっとだけ表示されてしまい不自然になるので、サンクスページがある場合は非表示にした方がいいと思います。

非表示にするコードはこちらです。

.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}

以上になります。

関連記事Contact Form 7 関連記事一覧

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!
  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-お問い合わせフォーム, WordPress
-,