MW WP Formの使い方で、選択項目を分割し、任意の場所にバリデーションエラーのメッセージを出すカスタマイズ方法

MW WP Formは、いつもお世話になっているWordPressのフォームプラグインです。今回は、任意の場所にバリデーションのエラーメッセージを出す方法についてまとめました。

エラーメッセージを任意の場所に出す。これは、
デザイン上任意の場所にエラーを表示したい
チェック項目を分けてコーディングしたい
アラートをまとめて一か所に表示したい
といった場合に便利です。例として、チェック項目をカテゴライズしたフォームのサンプルを紹介しています。

基本的な使い方については、こちらの記事にまとめています。
確認画面やエラー画面、完了画面(サンクスページ)も遷移自由なフォームプラグインMW WP form

201705 MW WP Formの条件分岐についての記事を公開しました
選択した内容によって、テキストボックスを必須に切り替える方法についての記事です
MW WP Formで、チェック・ラジオの選択状態によって必須を切り替える方法

MW WP Formのエラーメッセージを任意の場所に表示するサンプルフォーム

ラジオボタンを地域名ごとに分けて表示したフォームを用意しました。
地域選択1
・・・バリデーションのエラー表示を特に指定していません

地域選択2
・・・バリデーションのエラー表示場所を指定しています。

確認ボタンを押して、それぞれどこにアラートが表示されるか確認してみましょう。

MW WP Form 選択項目分割 サンプルフォーム


エラーの表示場所を指定しないケース
地域選択1*必須
【関東】
【関西】
【東海】

エラーの表示場所を指定するケース
地域選択2*必須
【関東】
【関西】
【東海】


地域選択1では、せっかく見やすいように選択項目を分割したのに、エラーメッセージが複数か所に出てしまいます。しかし、地域選択2では、任意の場所(項目直下)に表示しています。

MW WP Formのエラーメッセージを任意の場所に表示する方法

では、MW WP formのコードがどうなっているか見てみましょう。(HTMLは省きますね)


地域選択2 *必須 [mwform_error keys="地域選択2"]
【関東】[mwform_radio name="地域選択2" children="東京都,埼玉県" show_error="false"]
【関西】[mwform_radio name="地域選択2" children="大阪府,奈良県" show_error="false"]
【東海】[mwform_radio name="地域選択2" children="愛知県,静岡県" show_error="false"]
[mwform_confirmButton value="確認する"]

まず、デフォルトのエラーを非表示にする。
そして、任意の場所にエラーメッセージを表示する。

という手順になっています。

そもそも、同じネーム属性のコードを分けて記載してもいいんだ!という驚き。(そんなことは出来ないと思い込んでいた)
そして、「エラーを表示しない」という選択がなんのためにあるのかもわかっていなかった自分。

通常のお問合せフォームだと、なかなかここまですることは少ないと思います。改めてフォームをカスタマイズしてみると、色々な発見があり、このフォームプラグインの懐の深さに驚かされます。

上記のようにコードを書くだけでもよいですが、MW WP Form編集画面から、コードを生成する場合は下記の手順となります。

1.ラジオボタンを選択し、「フォームタグを追加」ボタンを押す

MW WP Form display error message anywhere

チェックボックスなどでも、同じことが言えるでしょうね。

2.ポップアップで、「エラーを表示しない」にチェックし、insert

MW WP Form display error message anywhere 02

[mwform_radio name="地域選択2" children="東京都,埼玉県" show_error="false"]
show_error=”false” がコードに追加されています。読んで字の如く。

3.エラーメッセージを選択し、「フォームタグを追加」ボタンを押す

MW WP Form display error message anywhere 03

4.ポップアップで、name属性、今回は「地域選択2」を入力してinsert

MW WP Form display error message anywhere 04

生成されたコード、
[mwform_error keys="地域選択2"]
を任意の場所に記載すれば、その部分にエラーメッセージが出てくるというわけです。

もちろん、バリデーションルールの設定もお忘れなく

これらの設定をした時に、忘れてはいけないのがバリデーションルールの設定ですね。

MW WP Form display error message anywhere 05

MW WP Formのエラーメッセージカスタマイズ まとめ

任意の場所にエラーメッセージを表示したときに、改行されて気になる・・・という場合もあるかもしれません。

これは、プラグインのデフォルトのCSSが影響しています。

.mw_wp_form .error {
    font-size: 93%;
    color: #B70000;
    display: block;
}

これを回避したい場合は、任意のクラスでフォームを囲い、CSSを上書きしたりすると変更できます。
そんなことをしなくても、フォームにはIDが振り分けられるので、それを使うこともできますが、コードを流用することも考えると、任意のdivで囲んだ方が後々使いやすいかもしれませんね。

#mw_wp_form_mw-wp-form-2767 .error {
    display: inline-block;
}
.sample-class .mw_wp_form .error {
    display: inline-block;
}

MW WP Formは、国内産で確認画面・エラー画面を設定できる、大変便利なプラグインです。カスタマイズ性にも優れているので、様々な要件に応えることが出来るでしょう。

冒頭でも紹介しましたが、基本的な使い方も以前まとめているので参考にして下さいね。
確認画面やエラー画面、完了画面(サンクスページ)も遷移自由なフォームプラグインMW WP form
※といっても、結構前のエントリーなので、なにか気になる点があったら気軽にコメント下さい。

是非、みなさんも使ってみて下さいね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です