
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;
}
以上になります。
Brainランキング1位獲得 & 3日で500部突破 クチコミ約300件 今だけ!5つの無料特典あり🎁 👇画像をクリック
WordPress案件の単価と作業効率を上げる!
(平均スコア)