Contact form 7 hide and show fields depending up on the condition

I have using contact form for my website and the code i have using is below

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Your Country
[select country id:CountryDropDown first_as_label “Select” “United Kingdom” “United States”] </label>

<label id=”UkStates”> State
[select state “London” “Scotland”] </label>

<label id=”UsaStates”> State
[select state “San Francisco” “New York”] </label>

[submit “Send”]

<script language=”javascript” type=”text/javascript”>
document.getElementById(“UkStates”).style.display = ‘none’;
document.getElementById(“CountryDropDown”).addEventListener(“change”, displayTextField);
function displayTextField() {
var dropDownText = document.getElementById(“CountryDropDown”).value;
if (dropDownText == “United Kingdom”) {
document.getElementById(“UkStates”).style.display = ‘block’;
} else {
document.getElementById(“UkStates”).style.display = ‘none’;
}
}
</script>

This code is working only one condition.
My question is how to create more condition by using JavaScript.

for example: country field have United States also, so if selecting United States want to display only US states.

please excuse if question is extended to large.
Thanks

Read more here:: Contact form 7 hide and show fields depending up on the condition

Leave a Reply

Your email address will not be published. Required fields are marked *