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

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

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

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

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

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

またContact Form 7の使い方はこちら記事を参照ください。

WordPressお問い合わせフォームの定番プラグイン Contact Form 7の使い方

効率よくWordPress制作したい人はこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上になります。

WordPress案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック