在聯系表單7中選擇下拉菜單后，顯示輸入字段

Question

嗨，大家好，我正在使用Wordpress Contact Form 7插件並嘗試實現： 如果選擇下拉菜單“其他”，則顯示文本字段

在dropdown中添加ID作為聯系表單7后，我現在正在通過Wordpress Page中的Visual Composer使用以下原始JS：

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

Answer 1

對於尋求更簡單解決方案的任何人。 在聯系表7中，您只需添加內聯JavaScript。

只要您不在腳本中添加空白行，添加到表單構建器的JavaScript就會在前端呈現。

這是來自CF7表單編輯器的副本：

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

希望能有所幫助。

如果您有興趣閱讀更多內容或將其擴展為單選按鈕，我最近在此處發布了一篇文章，其中包含更多代碼示例和示例。