MW WP Form でエラーの項目に背景色を付ける方法

WordPressのプラグイン『MW WP Form』にて、エラーの時にテキストフォームに背景色をつける(ピンクなど)方法をご紹介します。Contact Form 7ではフォーム背景色を変えるカスタマイズの情報も出てきたのですがMW WP Formは探せど探せど見つからなかったので書きました。

やり方

MW WP Formではエラー時にフォームの下に<span class=”error”>未入力です</span>のHTML要素が付与される。jQueryを使って、上記の要素を持つ親要素にerror-pinkクラスを付与し、次にCSSでそのerror-pinkクラスの子要素のテキストフォームの背景色を変える。

具体的には以下のJavaScriptコードを<head>などに含め、CSSで修飾する。

参考リンク

https://teratail.com/questions/22011

その他のMW WP FormのTips

郵便番号を自動入力させる

zipaddr-jpプラグインを使用する。

郵便番号、都道府県、市区町村、番地を指定のidに設定すればOK.

セレクトボックスの初期値として「選択してください」を入れる

【WordPress】WP MW Form のセレクタで「選択してください」を入れる

選択肢によってフォームを開閉する

以下が参考になる。しかしMW WP Formの選択肢として、「キー:値」(送信値:表示値)のような設定ができるが、後々の表示値の変更に影響ないようにキーによってshow()/hide()を切り替えると都合が悪い。

選択肢によって入力項目が開閉するフォームの作り方(MW WP FORM編)

選択肢によってバリデーションを変える

こちらも以下が参考になる。
https://website-homepage.com/wordpress/plugin/inquiry/mw-wp-form-validation-conditional-branch

チェックボックスによる任意/必須の切り替えは若干難しいが、以下のような形となる。

function my_validation_rule( $Validation, $data ) {
if ( isset( $data[‘hoge’][‘data’] ) ) {  // hogeチェックボックスにデータがあって
if ( in_array( ‘あり’, (array)$data[‘hoge’][‘data’] ) ) { // チェックがついているなら
$Validation->set_rule( ‘fuga’, ‘noEmpty’, array( // fugaを必須にする
‘message’ => ‘hogeがありの場合は必須です’
) );
}
} else { // チェックボックスに値がない=チェックされてなかったら
$Validation->set_rule( ‘piyo’, ‘noEmpty’); // piyoを必須にする
}
return $Validation;
}
add_filter( ‘mwform_validation_mw-wp-form-959’, ‘my_validation_rule’, 10, 2 );

エラーの際に上部にエラーメッセージを出す

https://webcre-archive.com/2018/02/07/mw-wp-form-error-message/

MW WP Formの設定データをエクスポートする

WordPressのツールを使えば、ある程度は作成したデータをエクスポートできる。完了画面のメッセージ、バリデーション、自動返信メールや管理者宛メールの内容はエクスポートできませんでした。データベースに情報を保存するようにしておけば、より多くの設定情報をエクスポートできるようだが、少し難易度は上がる。

下記のLIGさんの記事では、XMLの変換でバグがあるようですが、私は確認できず上手くいきました。

https://liginc.co.jp/433959