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 (2024/10/28 20:37時点 | 楽天市場調べ)
ポチップ
ポチップ