show input field once drop down is selected in Contact Form 7
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.
Related videos on Youtube
Bilal Naseer
Founder of https://websensepro.com <--! Helping world grow their <strong>REVENUES</strong> through Web and Digital channels, coder by hobby never attended college ever in my life :) -->
Updated on June 04, 2022Comments
-
Bilal Naseer almost 2 years
Hi guys I am using Wordpress Contact Form 7 plugin and trying to achieve: Show text field if drop down "Other" is selected
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!'); }
-
Lalji Tadhani over 8 yearsPossible duplicate of Show Form Field if Drop Down Item is Selected Using jquery
-
Bilal Naseer over 8 yearsAs I mentioned I am using Contact Form 7 (Wordpress plugin) where I don't have control over HTML of contact form
-
Lalji Tadhani over 8 years
-
Bilal Naseer over 8 yearsYup that's working thanks Lalji
-