KH-WEBLOG TOP > WEBメモ > WordPress > Contact Form7で送信ボタンを押した時だけエラーメッセージを表示する方法:WordPress

Contact Form7で送信ボタンを押した時だけエラーメッセージを表示する方法:WordPress

通常Contact Form7の場合リアルタイムにエラーチェックされてしまうので、
それを送信ボタンを押した時だけエラーメッセージを表示する方法をご紹介します。

コーディング・WordPress化作業を代行します

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化作業を代行します

WordPressのおすすめ参考書

楽天Kobo電子書籍ストア
¥3,278 (2024/10/28 20:37時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事