お問い合わせフォーム WordPress

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

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

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

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

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

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

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

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

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

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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 関連記事一覧

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

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