Contact Form7で送信ボタンを押した時のみバリデーションメッセージを表示する方法

まずはじめに、通常のケースを見てみましょう。当サイトのお問い合わせページのフォームをサンプルとして使用しています。

このように送信ボタンを押していなくても、必須入力の箇所が飛ばされて記入されるとバリデーションメッセージが表示されてしまいます。実現したい形はこうです。

必須項目を飛ばして入力してもバリデーションメッセージは表示されず、送信ボタンを押した時のみバリデーションメッセージが表示されています。では解説していきます!

目次

手順

送信ボタンにクラス名を付与する

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でもっといいカスタマイズがあれば、是非とも教えていただきたいです。お気軽にお問合せフォームからご連絡ください。以上キクチでした。ではでは。

仕事のご依頼や当サイトについての質問などは下記のお問い合わせフォームからご連絡ください。

場合によっては回答にお時間をいただくことがあります。ご了承ください。

    This site is protected by reCAPTCHA and the GooglePrivacy Policy and Terms of Service apply.

    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!
    目次