Contact Form7で送信ボタンを押した時だけエラーメッセージを表示する方法：WordPress
シェア
ツイート通常Contact Form7の場合リアルタイムにエラーチェックされてしまうので、
それを送信ボタンを押した時だけエラーメッセージを表示する方法をご紹介します。
cssの修正
以下のCSSを追加します。
.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
display: none;
margin-top: 10px;
}
.wpcf7-form-control-wrap.is-show .wpcf7-not-valid-tip {
display: block;
}
jQueryの追加
//送信ボタンを押した時のみバリデーションメッセージ表示
$('.wpcf7-submit').on('click', function() {
$(".wpcf7-form-control-wrap").addClass("is-show");
});
上記のjQueryを追加します。
もし複数Contact Form7を設置していて一部のみに反映させたい場合は
[submit class:クラス名 "送信"]
のようにして「.wpcf7-submit」の部分を追加したクラス名を指定すればOK
WordPressのおすすめ参考書
bookfan 1号店 楽天市場店
¥3,300 （2026/01/20 15:42時点 | 楽天市場調べ）
ポチップ
ポチップ