Зависимые поля Contact form 7

Всем доброго времени суток.
Пытаюсь настроить зависимые поля без использования плагинов.
Сейчас у меня форма имеет вот такой вид:

[select* select_status id:select_status first_as_label "Company/Individual" "Individual" "Company"] 

<div id="Individual_data">
[text* first_name_indv placeholder "First name"]
[text* last_name_indv placeholder "Last name"]
</div>
<div id="Company_data">
[text* company_name_comp placeholder "Company name"]
[text* first_name_comp placeholder "First name"]
[text* last_name_comp placeholder "Last name"]
</div>
 <div id="formButtons">
[submit id:sendMessage "Send Email"]
  </div>

<script>
document.getElementById("Individual_data").style.display = 'none';
document.getElementById("select_status").addEventListener("change", displayTextField);
function displayTextField() {
	let dropDownText = document.getElementById("select_status").value;
	if (dropDownText === "Individual") {
		document.getElementById("Individual_data").style.display = 'block';
	} else {
		document.getElementById("Individual_data").style.display = 'none';
	}
}
</script>
<script>
document.getElementById("Company_data").style.display = 'none';
document.getElementById("select_status").addEventListener("change", displayTextField);
function displayTextField() {
	let dropDownText = document.getElementById("select_status").value;
	if (dropDownText === "Company") {
		document.getElementById("Company_data").style.display = 'block';
	} else {
		document.getElementById("Company_data").style.display = 'none';
	}
}
</script>

поля выпадают в зависимости от выбора «Компания» или «Частник», по что бы пошла отправка (поля все обязательны), приходится заполнять два поля «Частник» и три поля «Компания».
Понимаю, что возможно нагородила огород. Помогите разобраться.

• Тема изменена 3 года, 10 месяцев назад пользователем milatovskaya.
• Тема изменена 3 года, 10 месяцев назад пользователем milatovskaya.