Conditionally Display Text Field When “Other” Is Selected In A Drop Down

 

Here we have below fields for the contact form :

  • Name
  • Email
  • Favorite Color (Pink, Red, Purple or Other)
  • Text Field to specify the favorite color

Now create new contact form in the Contact Form 7 plugin and also add new text field for the “other” option with the specific ID.

The content of the Contact form will look like this

<label> Your Name (required)
 </label>
 
<label> Your Email (required)
[email* your-email] </label>
 
<label> Your Favorite Color
[select drop-down-menu id:FavoriteColorDropDown "Pink" "Red" "Purple" "Other"] </label>
 
<label id="EnterFavoriteColorLabel"> Please Specify Your Favorite Color
 </label>
 
[submit "Send"]

Note : We have added ID “EnterFavoriteColorLabel” for the text field.

Script

Now we will put the script below the contact form’s content :

<script language="javascript" type="text/javascript">
// Hide the favorite-color text field by default
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
// On every 'Change' of the drop down with the ID "FavoriteColorDropDown" call the displayTextField function
document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    // Get the value of the selected drop down
    var dropDownText =  document.getElementById("FavoriteColorDropDown").value;
    // If selected text matches 'Other', display the text field.
    if (dropDownText == "Other") {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'block';
    } else {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
    }
  }
</script>

Now the Form will look like this :

Result :

Conditionally Display Text Field When A Radio Button Group Selection Is “Other”

Here we have below fields for the contact form :

  • Name
  • Email
  • Select a size (S, M, XL, Other)
  • Please specify your size

Here is the code for the Radio button. You can see how we have implemented it :

<label> Your Name (required)
 </label>
 
<label> Your Email (required)
[email* your-email] </label>
 
<label>Select A Size:</label> [radio select-a-size id:SelectASizeRadio default:1 "S" "M" "XL" "Other"]
 
<label id="EnterYourSize"> Please Specify Your Size
 </label>
 
[submit "Send"]
 
<script language="javascript" type="text/javascript">
// Hide the Text field by default
document.getElementById('EnterYourSize').style.display = 'none';
document.getElementById('SelectASizeRadio').addEventListener('click', displayTextField);
function displayTextField() {
  // Get the value of the currently selected radio button. 'select-a-size' is the name of the radio buttons you specify in the form builder
  var radioText = document.querySelector('input[name="select-a-size"]:checked').value;
  if (radioText == 'Other') {
    document.getElementById('EnterYourSize').style.display = 'block';
  } else {
    document.getElementById('EnterYourSize').style.display = 'none';
  }
}
</script>

Result :

There are currently no comments.