MW WP Formで任意項目の入力有無に応じて確認画面の表示を切り替える方法

公開日: 2024.07.22
最終更新日: 2026.07.17

MW WP Formで、「任意項目が入力されていなければ確認画面に表示せず、1つでも入力されていれば確認画面に表示する」という仕様を実装したい——依頼案件でこの要件があり、なかなか手こずったので、実装方法をまとめておきます。

結論から言うと、必須項目と任意項目のブロックを分けて作り、任意項目の入力有無をjQueryで判定して親要素にクラスを付け、CSSで表示を切り替えることで実現できます。この記事では、その手順を解説します。

1 必須項目と任意項目を分けてフォームを作る
2 任意項目の入力有無をチェックしてクラスを付与
3 クラスの有無でCSSの表示を切り替える
4 まとめ

必須項目と任意項目を分けてフォームを作る

下図のように、必須項目部分と任意項目部分を分けて作り、任意項目部分はアコーディオンなどで隠しておきます。

「任意項目を入力する場合はこちら」ボタンを押すと、任意項目部分がアコーディオンで開くようにします。HTMLは次のような構成です。

<section class="entry-form">
	<form>

		【必須項目部分】

		<div class="button-1">
			<input type="submit" name="submitConfirm" value="上記に同意して内容を確認する" class="input-btn next next-1" />
		</div>

		<div class="ac-label">任意項目を入力する場合はこちら</div>

		<div class="option">

			【任意項目部分】

			<div class="button-2">
				<input type="submit" name="submitConfirm" value="上記に同意して内容を確認する" class="input-btn next next-1" />
			</div>

		</div>

	</form>
</section>

アコーディオンの開閉は、次のjQueryで制御します。

$(function () {
	$(".ac-label").click(function () {
		$(this).next("div").slideToggle();
	});
});

任意項目部分は、初期状態では非表示にしておきます。

.option {
	display: none;
}

ポイントは、必須項目部分と任意項目部分に「確認する」ボタンを1つずつ置いていることです。「同意する」のチェックボックスは必須なので、両方のボタンに同じnameを指定しておくと、どちらか1つのボタンが使われてもバリデーションに引っかからず、確認画面に進めます。

MW WP Formでは送信ボタンにもnameを付けられます。必須側・任意側のボタンで同じnameにしておくことで、どちらのボタンから進んでも、同意チェックなどの必須バリデーションが同じように働く、という仕組みです。ボタンを2つに分けつつ、挙動は共通にできるのがこのやり方の肝です。

任意項目の入力有無をチェックしてクラスを付与

次に、jQueryで任意項目の各入力欄をチェックし、1つでも入力があれば、確認画面のフォームの親要素にoptionActiveというクラスを付与します。

[name='志望動機']のように、日本語のname属性でもquerySelectorで取得できます。任意項目が3つ以上ある場合は、判定に加える入力欄を増やし、すべて空かどうかを条件に足していきます。

$(function(){
	const $entryform = $(".entry-form"); //親要素をセット
	var name01 = document.querySelector("[name='志望動機']");
	var name02 = document.querySelector("[name='備考']");

	//各入力欄がどちらも空かどうかを判定
	if ($(name01).val() == "" && $(name02).val() == "") {
		$entryform.removeClass("optionActive");
	} else {
		$entryform.addClass("optionActive");
	}
});

クラスの有無でCSSの表示を切り替える

optionActiveが付いていれば任意項目部分を表示、付いていなければ非表示になるよう、CSSで制御します。

.entry-form .button-2 {
    display: none;
}

.entry-form .option {
    display: none;
}

.entry-form.optionActive .button-1 {
    display: none;
}

.entry-form.optionActive .button-2 {
    display: block;
}

.entry-form.optionActive .option {
    display: block;
}

これにより、任意項目が入力されていれば確認画面に任意項目部分が表示され、入力がなければ表示されない、という挙動が実現できます。