WordPress お問い合わせフォーム

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

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

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

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

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

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

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

参考記事
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

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