MW WP Formのエラー画面を、jQueryでカスタマイズ

WordPressのメールフォームプラグインMW WP Formは

確認画面がある
受け取ったメールはデータベースに保存可能
データベースの情報をCSVダウンロードできる
2重送信されない
バリデーションルールが豊富
各、遷移画面はユニークに設定できる

などなど至れり尽くせりの特徴をもった、使い勝手の良いメールフォームプラグインです。調べ尽くしたわけではありませんが、個人的にWordpressのメールフォーム系プラグインの中で唯一クライアントに納品できるプラグインだと思っています。当サイトにも導入しています。

そんなMW WP Formですが、豊富なバリデーションルールのわりに、エラー画面の自由度が低いのがたまにキズです。もっとも僕がちゃんと使いこなせていないだけかもしれませんが、個人的感想ということで、ご勘弁を！

jQueryのinsertAfter hasClass addClass replaceでエラー画面を自由にデザイン

デフォルトのままでは上図のようなデザインの場合、エラーがおこれば下図のようにエラーメッセージが不格好に表示されてしまいます。

ソースは以下のとおり

<dt>お問い合わせ内容</dt>
<dd><textarea name="お問い合わせ内容" cols="50" rows="5"  ></textarea><span class="error">未入力です。</span></dd>
<dt>お名前</dt>
<dd><input type="text" name="お名前" value="" size="60" maxlength="255"    /><span class="error">未入力です。</span> 
</dd>
<dt>メールアドレス</dt>
<dd><input type="text" name="メールアドレス" value="" size="60" maxlength="255"    /><span class="error">未入力です。</span>
</dd>
</dl>

<dt>お問い合わせ内容</dt>

<dd><textarea name="お問い合わせ内容" cols="50" rows="5" ></textarea><span class="error">未入力です。</span></dd>

<dd><input type="text" name="お名前" value="" size="60" maxlength="255" /><span class="error">未入力です。</span>

</dd>

<dt>メールアドレス</dt>

<dd><input type="text" name="メールアドレス" value="" size="60" maxlength="255" /><span class="error">未入力です。</span>

</dd>

</dl>

まず最初にクラスerrorをお手軽にポジションで枠の外に移動させました。

悪くはないのですが、IE7でエラーメッセージがうまく表示されなくて超ハマってしまいました。力技で表示させることは、できますが、毎回と思うと手間で仕方ありません。

で次に考えたのがjQueryでDOMを操作したほうが楽なんじゃね？ってことでした。まさにその通りで、jQueryを使ったほうが自由度も高いですし、設置も速かったです。

ご覧の通り格段に自由度も上がりました。以下MW-WP-Formのテンプレとjsです。

<dl class="req01">
<dt>お問い合わせ内容</dt>
<dd>
<p>[mwform_textarea name="お問い合わせ内容"]</p></dd>
</dl>
<dl class="req02">
<dt>メールアドレス</dt>
<dd>
<p>[mwform_text name="メールアドレス"]</p>
</dd>
</dl>
<div class="form-btn">
<ul>
<li class="subm2">[mwform_backButton]</li>
<li class="subm">[mwform_submitButton]</li>
</ul>
</div>

jQuery.event.add(window, "load", function(){ 
	$('span').each(function(){
		var txt = $(this).text();
		$(this).text(txt.replace("未入力です。","入力必須項目です。"));
	});
	$(".req01 span").prepend("※");
	$(".req01 span").insertAfter(".req01 dt");
	$(".req02 span").prepend("※");
	$(".req02 span").insertAfter(".req02 dt");

	if($(".req01 span").hasClass("error")) {
		$(".req01 textarea").addClass("ebg");
	}
	if($(".req02 span").hasClass("error")) {
		$(".req02 input[type=text]").addClass("ebg");
	}
});

<dt>お問い合わせ内容</dt>

<dd>

<p>[mwform_textarea name="お問い合わせ内容"]</p></dd>

</dl>

<dt>メールアドレス</dt>

<dd>

<p>[mwform_text name="メールアドレス"]</p>

</dd>

</dl>

<ul>

<li class="subm2">[mwform_backButton]</li>

<li class="subm">[mwform_submitButton]</li>

</ul>

</div>

jQuery.event.add(window, "load", function(){

$('span').each(function(){

var txt = $(this).text();

$(this).text(txt.replace("未入力です。","入力必須項目です。"));

});

$(".req01 span").prepend("※");

$(".req01 span").insertAfter(".req01 dt");

$(".req02 span").prepend("※");

$(".req02 span").insertAfter(".req02 dt");

if($(".req01 span").hasClass("error")) {

$(".req01 textarea").addClass("ebg");

}

if($(".req02 span").hasClass("error")) {

$(".req02 input[type=text]").addClass("ebg");

}

});

まずreplaceで「未入力です。」を「入力必須項目です。」に変換し、アラート感を出すためにprependで「※」を追加、insertAfterで項目名に移動させました。さらにアラート感をだすように、hasClassでクラスerrorを取得し、クラスerrorが含まれていたらaddClassでebgというクラスを付与するようにしています。

jQueryを使えばMW WP Formをもっとリッチにカスタマイズすることができますがそれはまたの機会に！

実際に実装したページ

2014年03月15日土曜日
：Naruhiko Wakai

BLOG

MW WP Formのエラー画面を、jQueryでカスタマイズ

jQueryのinsertAfter hasClass addClass replaceでエラー画面を自由にデザイン

Sponsored Links

コメントを残すコメントをキャンセル

Sponsored Links

Naruhiko Wakai

MW WP Formのエラー画面を、jQueryでカスタマイズ

jQueryのinsertAfter hasClass addClass replaceでエラー画面を自由にデザイン

Sponsored Links

コメントを残す コメントをキャンセル

Sponsored Links

コメントを残すコメントをキャンセル