2

Hi guys I am using Wordpress Contact Form 7 plugin and trying to achieve: Show text field if drop down "Other" is selected

Drop down menu items

I am using following raw JS for now through Visual composer in Wordpress Page after adding dropdown as id in Contact Form 7:

var x = document.getElementById("dropdown");
if(x.value = "Other") {
 alert('Enter your js here!');
}
4

1 Answer 1

6

For anyone looking for a simpler solution. In contact form 7, you can simply add inline JavaScript.

JavaScript added to the form builder will be rendered on the front-end as long as you do not add blank lines within the script.

Here is the copy from a CF7 form editor:

<label> Your Name (required)
[text* your-name] </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
[text favorite-color] </label>

[submit "Send"]

<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>

Hope that helps.

If you are interested in reading more or extending the same for radio buttons, I recently published an article with more code samples and examples here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.