WordPress:「MW WP Form」のエラー表示周りをカスタマイズする際の備忘録

  • Posted on
  • Category : WordPress
WordPress:「MW WP Form」のエラー表示周りをカスタマイズする際の備忘録

確認・完了画面付きのフォームを簡単に実装できるWordPressプラグイン「MW WP Form」をカスタマイズしたいときに毎回ど忘れしたりググったりしているので備忘録です。エラー文言の変更やエラーをまとめて表示するなど、エラー表示周りのカスタマイズ時のものになります。

※紹介している内容は、MW WP Form Ver 3.2.1 で検証した内容になります。
「MW WP Form」についての基本的なインストール・使用方法については割愛しているので、使用したことない場合などはプラグインの詳細も含め「MW WP Form」で確認してください。

WordPress:「MW WP Form」のエラー表示周りをカスタマイズする際の備忘録 目次

  1. formタグにエラー用classを付与する
  2. エラー文言を変更する
  3. エラー表示位置を変更する
  4. 複数要素のエラーをまとめて表示する
  5. エラー表示HTMLのclassを変更する

1. formタグにエラー用classを付与する

「MW WP Form」は、入力画面では.mw_wp_form_input、確認画面では.mw_wp_form_previewというように現在の状態によってform部分に特定のclassが付与される作りになっており、表示されている画面によってCSSを使って見栄えを変更したい場合などはこれらのclassを利用することで可能です。
ただ、エラー表示時についてはこういった特定のクラスが付与されないので、エラー表示時でも特定のclassがformタグに付与されるようにする方法です。
本当はフックなどを使ってできれば良いのですが、ここでは手っ取り早くjQueryを用いた実装方法を紹介します。

jQuery

jQuery(function($) {
	if ( $('.error')[0] ) {
		$('.mw_wp_form').addClass('mw_wp_form_error');
	}
});

見たままですが、条件分岐を使ってエラー表示している要素(<span class="error"></span>)があるかないかを判断し、あった場合は.addClass()を使ってformタグである.mw_wp_formにclassを付与するというものになります。
このサンプルの場合は.mw_wp_form_errorというclassが付与されるというものになり、他のものにしたければ赤文字部分を任意のものに変更してください。

目次へ

2. エラー文言を変更する

「MW WP Form」のフォーム作成画面下部でバリデーション設定をすることができ、そちらを設定することで未入力時にエラーを表示するとかメールアドレス記入欄なのにメールアドレスの形式でなかった場合にエラー表示するといった動きを実装することができますが、その際に表示されるエラー文言を任意の文言に変更する方法です。

例えばバリデーションで「必須項目」を設定していた場合は、デフォルトでは「未入力です。」というエラー文言が表示されますが、functions.phpへ下記のように記述することで文言を赤文字で表示している「exampleが未入力です。」に変更することができます。

※下記はname属性を「example」とした場合のものになります。
また、フック名にあるxxxの部分は、自身が作成したフォームのkeyに併せて変更してください。

functions.php

add_filter( 'mwform_error_message_mw-wp-form-xxx', 'custom_mwform_error_message', 10, 3 );
function custom_mwform_error_message( $error, $key, $rule ) {
	if ( $key === 'example' && $rule === 'noempty' ) {
		return 'exampleが未入力です。';
	}
	return $error;
}

上記コードは、対象のフォーム要素を指定した$keyと対象のバリデーションルールを指定した$ruleの条件に一致する要素があればエラー文言を変更するというものになり、今回のサンプルでは対象のフォーム要素のname属性が「example」なので$key === 'example'とし、バリデーションルールは「必須項目」となるので$rule === 'noempty'としています。
$keyについては自分でフォーム作成時に設定したものを使用し、$ruleについては「バリデーションルール | MW WP Form」のページでバリデーションルールについてまとめられたページがあるので、そちらで確認することができます。

上で紹介した変更方法は1つのフォーム要素に対して1つのバリデーションルールが設定されている場合でしたが、1つのフォーム要素に対して複数のバリデーションルールが設定されており、それぞれ文言を変更したいという場合も条件分岐を増やしてあげれば容易に変更できます。

例えば下記はメールアドレスの入力欄に「必須項目」と「メールアドレス」という2つのバリデーションルールを設定した場合のもので、それぞれでエラー時に表示される文言を設定しています。

※下記はname属性を「email」とした場合のものになります。
また、フック名にあるxxxの部分は、自身が作成したフォームのkeyに併せて変更してください。

functions.php

add_filter( 'mwform_error_message_mw-wp-form-xxx', 'custom_mwform_error_message', 10, 3 );
function custom_mwform_error_message( $error, $key, $rule ) {
	if ( $key === 'email' ) {
		if ( $rule === 'noempty' ) {
			return 'メールアドレスが未入力です。';
		} elseif ( $rule === 'mail' ) {
			return '入力いただいた内容はメールアドレスの形式ではありません。';
		}
	}
	return $error;
}

上記記述後に表示を確認すると、未入力だった場合は「メールアドレスが未入力です。」というエラー文言が表示され、メールアドレスの形式でなかった場合は「入力いただいた内容はメールアドレスの形式ではありません。」というエラー文言が表示されるようになります。
始めに紹介したような形で&&で条件指定したものをelseifで繋げてどんどん追記していくのでももちろん可能ですが、沢山フォーム要素があったり文言設定を細かくしていくような場合は、こちらの方が多少はわかりやすいかなと思います。

こちらのカスタマイズについては、下記「MW WP Form」のマニュアルページに掲載されているものをベースにしています。

目次へ

3. エラー表示位置を変更する

バリデーション設定をした場合、デフォルトでは入力欄などの下にエラー文言が表示されるので、入力欄下ではなく上に出したいとか個別にエラー表示するのではなくフォームの一番上にまとめてエラーを表示させたいというときもあります。
そういった場合は、以下で紹介する方法でエラー表示位置を任意の位置へ変更することができます。

デフォルトのエラー表示を非表示にする

まずは、デフォルトで表示されるエラーを非表示にしていきます。
非表示にする際はフォームタグ追加時に項目として用意されている「エラーを表示しない」にチェックを入れる、もしくは要素のショートコード内にshow_error="false"を記述することで非表示にでき、ショートコード内の記述については下記の赤文字のような形で記述します。

[mwform_text name="example" size="60" show_error="false"]

エラーを表示したい場所にコードを記述

次にエラーを表示したい場所にコードを記述していきます。
下記のようなショートコードを記述することで任意の場所にエラーを表示させることができ、keysの部分はエラーを表示させたい要素に指定しているname属性値を記述します。
今回のサンプルの場合は上にもあるように「example」というname属性の要素のエラーを表示したいので、keys="example"としてあります。

[mwform_error keys="example"]

ちなみに、上の場合はひとつずつエラー表示を指定するような書き方になっていますが、[mwform_error keys="example1,example2"]のようにカンマ区切りで指定すれば、複数のフォーム要素のエラー表示を一気に指定することができます。
また、自身でコードを記述するだけでなく、フォームタグを選ぶセレクト内にある「エラーメッセージ」で追加することもできます。

目次へ

4. 複数要素のエラーをまとめて表示する

複数要素のエラーをまとめて表示する

ちょっと伝わりづらいかもしれませんが、例えば上にイメージ(上)にあるようにグループ化されたような見た目で複数の入力欄が必須項目として設置されている場合、単純にそれぞれの項目に対して管理画面からバリデーション設定をすると各項目毎にエラーを表示します。
それを、イメージ(下)にあるように項目は複数あってもエラー表示は1つしか表示しない(まとめて表示する)という動きにする方法です。

今回はサンプルとしてname属性に「item01」「item02」「item03」を指定した3つの入力欄があり、それらはすべて必須項目という想定にして、3項目のうちどれかひとつでも未入力だった場合にエラーを表示するようにしてみます。
まず、管理画面でフォームタグを追加する際に各項目で「エラーを表示しない」にチェックを入れる、もしくはショートコード内にshow_error="false"を記述してエラー表示がされないように設定をしておきます。
次にエラーを表示したい箇所に先ほど紹介したカンマ区切りを用いる形で記述をします。
今回は「item01」「item02」「item03」という3つの入力欄がある想定なので、エラー表示と併せて下記のような記述になります。

項目1
[mwform_text name="item01" size="60" show_error="false"]

項目2
[mwform_text name="item02" size="60" show_error="false"]

項目3
[mwform_text name="item03" size="60" show_error="false"]

[mwform_error keys="item01,item02,item03"]

管理画面での作業はここまでで、次にバリデーションルールを追加していきます。
通常であればバリデーション設定も同じく管理画面で行うことが多いと思いますが、今回はこのプラグインで用意されているmwform_validation_mw-wp-form-xxxというフィルターフックを利用して独自のバリデーションルールを設定していきます。
実装にはfunctions.phpへ下記のように記述します。

※フック名にあるxxxの部分は、自身が作成したフォームのkeyに併せて変更してください。

functions.php

add_filter( 'mwform_validation_mw-wp-form-xxx', 'add_mwform_validation_rule', 10, 2 );
function add_mwform_validation_rule( $Validation, $data ) {
	$validation_message = 'いずれかの項目が未入力です。';
	if ( empty( $data['item01'] ) ) {
		$Validation->set_rule( 'item01', 'noempty', array( 'message' => $validation_message ) );
	} elseif ( empty( $data['item02'] ) ) {
		$Validation->set_rule( 'item02', 'noempty', array( 'message' => $validation_message ) );
	} elseif ( empty( $data['item03'] ) ) {
		$Validation->set_rule( 'item03', 'noempty', array( 'message' => $validation_message ) );
	}
	return $Validation;
}

上記記述後にフォームを確認すると、3つの項目に関するエラーがまとめられて「いずれかの項目が未入力です。」という文言が1つだけ表示されるようになります。
今回はバリデーションルールが必須項目だけでしたが、少し変更すれば複数のバリデーション設定をしつつエラー表示は1つだけという動きも実装できます。

普段からこのプラグインをよく利用している人とかであれば、デフォルトの動きに併せてデザインを作成したりすることもできたりしますが、デザイン的に確実にこのような見栄えにしなくてはいけないとか複数のエラー表示が見栄え的にいまいちと感じるときは試してみてください。

目次へ

5. エラー表示HTMLのclassを変更する

エラー表示される際、デフォルトでは<span class="error">未入力です。</span>のようなHTMLが出力されますが、CSSの関係などでこのclass名を任意のものに変更したいという場合は、functions.phpに下記を記述することで任意のclass名に変更できます。

functions.php

add_filter( 'mwform_error_message_html', 'custom_mwform_error_message_html', 10, 2 );
function custom_mwform_error_message_html( $tag, $error ) {
	$start_tag = '<span class="error-message">';
	$end_tag = '</span>';
	return $start_tag . esc_html( $error ) . $end_tag;
}

$start_tagで開始タグとclass名、$end_tagで閉じタグをそれぞれ指定しており、上記記述後に確認するとエラー表示時のHTMLが<span class="error-message">未入力です。</span>という形でclass名が変更されているのを確認できます。
また、ここではclass名の変更ということで紹介してはいますが、spanの部分を変更すればclass名だけでなく任意のHTMLに変更することも可能です。

目次へ

以上、WordPressでフォームを簡単に実装できるプラグイン「MW WP Form」のエラー表示周りをカスタマイズする際の備忘録でした。
WordPressのフォーム実装プラグインといえば「Contact Form 7」も手軽に実装できることで有名ですが、「MW WP Form」もデフォルトで確認・完了画面の設定ができるとかカスタマイズしやすいフックが多数用意されていたりとかなり便利なプラグインです。
使い方も全体的に難しいと感じるところはないですし、しっかりしたマニュアルも用意されていてわかりやすいと思うので、まだ使ったことがない人は是非試してみてください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。