WordPress MW WP Form : 入力エラーありのメッセージだけをページTOPに、詳細は各項目に表示する

WordPressのでフォームを簡単に作れるプラグイン「 MW WP Form 」
こちらの実践的な使い方のご紹介です。

MW WP Form とは？
MW WP Form はショートコードを使って確認画面付きのメールフォームを作成することができるプラグインです。
https://ja.wordpress.org/plugins/mw-wp-form/

導入方法や基本的な使い方は他にも記事が多くありますので、
この記事ではそのあたりには触れません。

MW WP Formの入力エラー表示をコントロールしたい

お客様より下記のご要望がありました。

「入力エラーがある場合に、ページTOPには、エラーがある旨だけを大きく表示し、それぞれのエラーの詳細は各項目を確認するよう促したい」

各項目にエラー情報をだしたり、別の場所に各項目のエラー情報を表示することはデフォルトの機能でできるのですが、それらとは別のざっくりしたメッセージを出すという課題で、ちょっと悩みました。
が、少しの工夫で、簡単にできたのでメモしておきます。
jsや、function.phpでの処理も不要です^^

MW WP Form エラー表示の基本

まず。
バリデーションルールを設定している場合に、条件に引っかかった場合に、エラー情報が表示されます。

この入力エラー情報は、デフォルトでは、各input項目のすぐ後に表示されます。

これを非表示にしたい場合には。。。
「show_error=”false”」属性を加えればOKです。
＊「フォームタグを追加」する際に、「エラーを表示しない」にチェックをすると、これが加わります。

このままではエラーが起きていることがわからなくなってしまうので、どこかに出力させる必要があります。

エラーを好きな場所に表示するには。。。
「mwform_error」を追加します。
この際、対応する入力欄のname属性を、keys属性の値として設定します。

お名前[mwform_error keys="str_name"]
[mwform_text name="str_name" size="60 show_error="false"]
フリガナ[mwform_error keys="str_kana"]
[mwform_text name="str_kana" size="60" show_error="false"]

CSSで、エラーメッセージの表示を微調整
.mw_wp_form .error {
    display: inline;
    position: relative;
    padding-left: 1em;
}
.mw_wp_form .error::before {
    content: "*";
    font-size: 1.3em;
    position: absolute;
    left: 0.3em;
    top: -0.3em;
}

するとこんな感じに。

この調整は大変便利ですね！

入力エラーに気づきづらい？！

制作側としては、これだけ十分のように思いがちですが。。。
フォーム前の情報が多い場合など、ユーザさんによっては、エラーが起きていることに気づかないことがあるようです。

画面がリロードされたことで、
送信(申し込み)が出来ていないのに、できたと思い込んでしまわれる様で。

↓エラー情報が目に入りにくい。。。のかも？

それで最初のご依頼だったわけです。

イマイチな対応例

「mwform_error keys=”xxxxx”」を必要な項目すべてについて、フォーム上部に配置することも可能ですが。。。

<p class="error-area">[mwform_error keys="str_name,str_kana"]</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
お名前[mwform_error keys="str_name"]
[mwform_text name="str_name" size="60 show_error="false"]
フリガナ[mwform_error keys="str_kana"]
[mwform_text name="str_kana" size="60" show_error="false"]

↓こんな感じになり、正直、あまり親切とは言えません。

もちろん各メッセージをfunction.phpで編集して、項目名も表示するようにすることは出来ますが。。。

そうではなくて、こういう感じにしたい！

実現方法

これを実現するためには。。。

各項目のエラーは好きな場所に出力するよう変更(または、デフォルトのまま。消さない)
→ mwform_error
TOP部分にも、まとめてエラーを出力するよう設定
→ error-area
2の出力の後に、エラーがある場合にメッセージを表示する欄を用意する
→ have-error
CSSで2を常に非表示にする
CSSで２が存在する場合のみ、3に設定したメッセージを表示させる

<p class="error-area">[mwform_error keys="str_name,str_kana"]<span class="have-error"></span></p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
お名前[mwform_error keys="str_name"]
[mwform_text name="str_name" size="60 show_error="false"]
フリガナ[mwform_error keys="str_kana"]
[mwform_text name="str_kana" size="60" show_error="false"]

一応、上部メッセージ部分の表示コントロールCSSも載せておくと、こんな感じ。

/* error-areaのエラーメッセージは常に非表示 */
.mw_wp_form .error-area .error {
    display: none;
}
/* error-areaのエラーメッセージがある場合のみ、その後ろのメッセージ欄を表示 */
.mw_wp_form .error-area .error~.have-error {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #ef1285;
}
/* 表示したいメッセージの設定 */
.mw_wp_form .error-area .error ~ .have-error::before {
    content: "★入力エラーがあります。内容をご確認ください。";
}