まずはじめに、通常のケースを見てみましょう。当サイトのお問い合わせページのフォームをサンプルとして使用しています。
このように送信ボタンを押していなくても、必須入力の箇所が飛ばされて記入されるとバリデーションメッセージが表示されてしまいます。実現したい形はこうです。
必須項目を飛ばして入力してもバリデーションメッセージは表示されず、送信ボタンを押した時のみバリデーションメッセージが表示されています。では解説していきます！
手順
送信ボタンにクラス名を付与する
Contact Form7のフォームを作成するページに来ていただいて、送信ボタンをこのように記述します。
[submit class:form-submit "送信する"]CSSでデフォルトではバリデーションメッセージを非表示
.wpcf7-form-control-wrap {
> .wpcf7-not-valid-tip {
display: none;
margin-top: 10px;
}
&.is-show {
> .wpcf7-not-valid-tip {
display: block;
}
}
}jQueryのクラスの付け外しによって表示非表示の切り替え
//送信ボタンを押した時のみバリデーションメッセージ表示
jQuery(".form-submit").click(function () {
jQuery(".wpcf7-form-control-wrap").addClass("is-show");
});はい。これだけです。
まとめ
Contact Form7はフォーム機能を簡単に実装できるので、私も重宝しています。今回紹介したように少しカスタマイズしただけで理想のフォームに仕上がってくれるので、ありがたいですよね。
Contact Form7でもっといいカスタマイズがあれば、是非とも教えていただきたいです。お気軽にお問合せフォームからご連絡ください。以上キクチでした。ではでは。
