Contact Form 7でのバリデーションはjQueryプラグインのexValidationが便利!

Contat Form 7といえばWordPressでフォームを実装できる超メジャープラグイン。実はこれまであまり使ったことがなく、仕事で必要になったので触ってみたところ、デフォルトのバリデーションは必須チェックしかないらしい。

何かバリデーションを追加できる良い方法がないかなと調べていると、下記の記事を発見。

他のフォームバリデーション用JavaScriptと組み合わせると。上記は少し難しそうだったので、Costom Field GUI Utility 3で使用されている「exValidation」を使うことにしました。

組み合わせ方法

exValidationについての詳しい情報は公式サイト「どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509」をご覧いただければかなり詳細に書いてありますが、バリデーションの種類も豊富で実装も簡単です。

JavaScript

下記のような感じで、バリデーションを適用されるフォームに「exValidationメソッド」を適用します。exValidationメソッドでは様々なオプションと、各項目にどんなバリデーションを行うかを指定できます。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exValidation/exvalidation.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exValidation/exchecker-ja.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/js/exValidation/exvalidation.css" />
<script type="text/javascript">
jQuery( function( $ ) {
$('#hoge form')
	.exValidation({
		errHoverHide: true,
		rules: {
			'name': 'chkrequired',
			'furigana': 'chkrequired chkkatakana',
			'groupZip': 'chkgroup chkrequired chkzip',
			'pref': 'chkselect',
			'faddress': 'chkrequired',
			'groupTel': 'chkgroup chkrequired chktel',
			'youremail': 'chkrequired chkemail',
			'reemail': 'chkrequired chkretype-youremail'
		}
	});
} );
</script>

Contact Form 7

後はContac Form 7のフォームを設置するだけ(ショートコードが実行されてしまうので、下記の例では[ ]で囲まれた中身の前後にスペースが入っています)。

// テンプレートに埋め込む場合
<?php echo do_shortcode( '[ contact-form-x id="xxxx" title="フォーム" ]' ); ?>

// 記事に埋め込む場合
[ contact-form-x id="xxxx" title="フォーム" ]

Contact Form7のバリデーションとexValidationのバリデーションが喧嘩しないか心配でしたが、そんなこともなくexValidationのバリデーションがうまく動いてくれます。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく