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