Contact Form 7では必須項目が入力されていない状態で送信ボタンをクリックすると、エラーメッセージが自動で表示されます。
また、送信が成功した時も自動でメッセージが表示されます。
しかしこれを『非表示にして下さい』と実務では言われることがあります。
今回はこれらのメッセージを非表示にする方法をご紹介します。
Contact Form 7の基本的な使い方については以下の記事を参照下さい。
-
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
続きを見る
Contact Form 7で送信成功やエラーメッセージを非表示にする方法
Contact Form 7が自動で表示するメッセージは3種類あります。
- 必須項目未入力の時に項目下に表示されるメッセージ
- 必須項目未入力の時に送信ボタン下に表示されるメッセージ
- 送信成功した時に送信ボタン下に表示されるメッセージ
最初の『必須項目未入力の時に項目下に表示されるメッセージ』を非表示にすることはあまりないと思いますが、これを非表示にする方法もご紹介します。
全てCSSにコードを追記するだけでOKです。
必須項目未入力の時に『項目下』に表示されるメッセージを非表示
これは以下のようなメッセージです。
Contact Form 7：必須項目未入力の時に『項目下』に表示されるメッセージ
これは各入力項目の下に表示されます。
非表示にするコードはこちらです。
.wpcf7-not-valid-tip {
display: none;
}この次の『必須項目未入力の時に送信ボタン下に表示されるメッセージ』も一緒に非表示にしてしまうと、エラーメッセージが一切表示されずなぜ送信出来ないのか分からなくなるのでご注意ください。
必須項目未入力の時に『送信ボタン下』に表示されるメッセージを非表示
これは以下のようなメッセージです。
Contact Form 7：必須項目未入力の時に『送信ボタン下』に表示されるメッセージ
先ほどの『必須項目未入力の時に項目下に表示されるメッセージ』が表示されれば、こちらは非表示にしてもいいかと思います。
非表示にするコードはこちらです。
.wpcf7-form.invalid .wpcf7-response-output {
display: none;
}
送信成功した時に『送信ボタン下』に表示されるメッセージを非表示
これは以下のようなメッセージです。
Contact Form 7：送信成功した時に『送信ボタン下』に表示されるメッセージ
これはサンクスページがなければ表示された方がいいですが、サンクスページがある場合はサンクスページに遷移するまでの時間にちょっとだけ表示されてしまい不自然になるので、サンクスページがある場合は非表示にした方がいいと思います。
非表示にするコードはこちらです。
.wpcf7-form.sent .wpcf7-response-output {
display: none;
}以上になります。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ！5大無料特典あり🎁
