MW WP Form で入力エラー時にエラーメッセージを表示する

WordPress公式フォーラムの方で質問があったのでその回答を兼ねて記事にしました。
フォーラムの該当記事はこちら。

内容はタイトルにある通り、お問い合わせプラグイン「MW WP Form」で入力エラーがあった場合、入力フォームの上部にエラーメッセージを表示させます。

ではその手順を説明していきます。

STEP.1　入力フォームを作成

まずは、MW WP Form の編集画面で入力フォームを作ります。
今回は例として「お名前」と「お問い合わせ内容」の2つの項目を作成。
合わせてバリデーションルールに「お名前」と「お問い合わせ内容」を必須項目に設定しておきます。
このあたりの詳しい説明は MW WP Form のマニュアルをご覧ください。

お名前
[mwform_text name="お名前"]
お問い合わせ内容
[mwform_textarea name="お問い合わせ内容"]

[mwform_submitButton confirm_value="確認画面へ" submit_value="送信する"]
[mwform_backButton value="戻る"]

STEP.2　エラーメッセージを挿入

上記で作成した入力フォームの最上部に「テキストモード」にて下記を追加します。

<p class="error-message">※入力内容に誤りがあります。</p>

追加後はこのような感じです。

<p class="error-message">※入力内容に誤りがあります。</p>
お名前 [mwform_text name="お名前"]
お問い合わせ内容 [mwform_textarea name="お問い合わせ内容"]

[mwform_submitButton confirm_value="確認画面へ" submit_value="送信する"]
[mwform_backButton value="戻る"]

STEP.3　functions.php に追記

下記コードを functions.php に追記します。
内容はCSSとJavascriptなので、テーマ内にCSSファイルやJSファイルがあればそれらに追記してもOKです。

// MW WP Form エラーメッセージの表示
function mw_wp_form_error_message() {
?>
<style type="text/css">
.mw_wp_form .error-message { display: none; }
.mw_wp_form_error .error-message { display: block; color: #E60012; }
</style>
<script>
jQuery(function() {
	if( $( '.mw_wp_form .error' ).length ) {
		$( '.mw_wp_form' ).addClass( 'mw_wp_form_error' );
	}
});
</script>
<?php
}
add_action( 'wp_head', 'mw_wp_form_error_message' );

※CSSのスタイルはサイトに合うように適宜追加や変更をしてください。

作業は以上となります。
実際に動作確認をして、入力エラー時にのみにエラーメッセージが表示されれば完成です！

【動作環境】 WordPerss 4.9.4