How to create conditional fields using Contact Form 7 without any plugin in WordPress?

Contact Form7 is one of the most flexible WordPress plugins to add forms to your WordPress web site. Even though the name suggests it’s a plugin to create contact forms, you can create all complicated forms with it. The plugin’s logical structure and great coding allow for other plugins and themes to hook into and extend it’s functionality.

It’s been my number one choice for many years. One feature I found myself coding up over and over again was conditional logic. By this I mean the ability to show certain fields, depending on the value of some other fields.

It’s a great way to make complex forms more compact, and present the user with only the information he is interested in.

Please create a form & paste below code, than save the form and place form short code to your page & post then save your page and visit your site

Contact form7 Conditional field create without any plugin

<label> <strong>Select Your Job Track:</strong>
[select drop-down-menu id:YourTrackDropDown “Select Your Job Track” “Architectural_and_Civil_CAD” “Systems_Analysis_and_Design_with_C_NET” “Graphics_Animation_and_Video_Editing” “Networking_Technologies” “Web_Presence_Solutions_and_Implementations”] </label>

<label id=”EnterFavoriteTrackLabelOne”>
<span class=”track-info”><strong>Trainer: Architectural and Civil CAD (ACAD)</strong>
<strong>Educational Requirement:</strong>
Graduation in Civil Engineering.
<strong>Experience:</strong>
Minimum of two (2) years, AutoCAD and related tools
<strong>Experience in:</strong>
1. Designing, Modeling & Drafting with AutoCAD
2. 3D Modeling & Animation with Autodesk 3DS Max
3. Engineering, Modeling and Drafting with Revit Architecture
4. Enhancing CAD Drawings with Adobe Photoshop
5. Implementing Project Management Principles and Practices with Microsoft Project
</span>
</label><label id=”EnterFavoriteTrackLabelTwo”>
<span class=”track-info”><strong>Trainer: Enterprise Systems Analysis and Design with C# .NET (ESAD-CS)</strong>
<strong>Educational Requirement:</strong>
Graduation in Computer Science or IDB-BISEW graduate of ESAD-CS.
<strong>Certification:</strong>
MCSD certificationon .NET 4.5 (Web Applications) or higher.
<strong>Experience:</strong>
Minimum of two (2) years
<strong>Experience in:</strong>
1. Programming with C#.Net 4.5.1 and above
2. Designing and implementing databases with Microsoft SQL Server 2012 Enterprise Edition
3. O-O Systems Analysis and Design with UML using MS Visio and MS Visual Studio
4. Programming in HTML5 with JavaScript & CSS3
5. Introduction to XML & Reporting
6. Web Application Development with ASP.NET
7. Developing ASP.NET MVC Web Applications
8. Developing Windows Azure and Web Services + Project
</span>
</label><label id=”EnterFavoriteTrackLabelThree”>
<span class=”track-info”><strong>Trainer: Graphics, Animation and Video Editing</strong>
<strong>Educational Requirement:</strong>
Graduation in Fine Arts or IDB-BISEW graduate of (GAVE).
<strong>Experience:</strong>
Minimum of two (2) years
<strong>Experience in:</strong>
1. Drawing & Illustration
2. Photo Editing and Texturing
3. Free Hand Sketching
4. Fundamentals of 2D Animation & Interactivity
5. Digital Video Editing and Storyboarding Basic
6. 3D Modeling, Texturing and Animation
7. Post Production & Composition
8. Practical Project
</span>
</label><label id=”EnterFavoriteTrackLabelFour”>
<span class=”track-info”><strong>Trainer: Networking Technologies</strong>
<strong>Educational Requirement:</strong>
Graduation in CSE, ICT, ICE, EEE or IDB-BISEW graduate of (GAVE).
<strong>Certification:</strong>
Vendor Certification- MCTS,MCITP andMCSAis required
<strong>Experience:</strong>
Minimum of two (2) years
<strong>Experience in:</strong>
1. Hardware Fundamentals
2. Data Communication Systems
3. Administering and Configuring Microsoft Windows 10.
4. Installing and Configuring Windows Server 2012
5. Administering and Managing Windows Server 2012
6. Configuring Advanced Windows Server 2012 Services
7. Configuring Windows Server 2008/2012 Applications Infrastructure
8. Red Hat Enterprise Linux SystemAdministration I, II & III
<strong>Candidates having practical work experience with switches,firewall, router ( Mikrotik and Cisco) and Linux servers will get preference as Sr. Network Engineer</strong>
</span>
</label><label id=”EnterFavoriteTrackLabelFive”>
<span class=”track-info”><strong>Trainer: Web-presence Solutions & Implementations (WPSI)</strong>
<strong>Educational Requirement:</strong>
Graduation or IDB-BISEW graduate of (WPSI).
<strong>Experience:</strong>
Minimum of two (2) years
<strong>Experience in:</strong>
1. Web Publishing
2. CSS3, Bootstrap & Photoshop
3. Database Driven Web, Application using PHP, MySQL
4. Application development using Magento, AngularJS & jQuery
5. Joomla 3.0[10] & WordPress & Theme development & Woo commerce
6. Codelgniter ,Laravel , Cake PHP ,XML & Project
</span>
</label>
<p><strong>Name:*</strong> [text* your-name]</p>
<p><strong>Email:*</strong> [email* your-email]</p>
<p><strong>Phone:*</strong> [tel* phone]</p>
<p><strong>Upload CV:*</strong> [file* uploadcv limit:1024MB filetypes:doc|pdf]</p>
<div class=”g-recaptcha” data-sitekey=”6LdzQh4UAAAAAE04XZUwkb96GH7vAp9xOuuY0z1Z”></div>
<p>[submit “Send”]</p>
<script language=”javascript” type=”text/javascript”>
document.getElementById(“EnterFavoriteTrackLabelOne”).style.display = ‘none’;
// On every ‘Change’ of the drop down with the ID “YourTrackDropDown” call the displayTextField function
document.getElementById(“YourTrackDropDown”).addEventListener(“change”, displayTextField);
function displayTextField() {
// Get the value of the selected drop down
var dropDownText = document.getElementById(“YourTrackDropDown”).value;
// If selected text matches ‘Other’, display the text field.
if (dropDownText == “Architectural_and_Civil_CAD”) {
document.getElementById(“EnterFavoriteTrackLabelOne”).style.display = ‘block’;
} else {
document.getElementById(“EnterFavoriteTrackLabelOne”).style.display = ‘none’;
}
}
</script>
<script language=”javascript” type=”text/javascript”>
document.getElementById(“EnterFavoriteTrackLabelTwo”).style.display = ‘none’;
// On every ‘Change’ of the drop down with the ID “YourTrackDropDown” call the displayTextField function
document.getElementById(“YourTrackDropDown”).addEventListener(“change”, displayTextField);
function displayTextField() {
// Get the value of the selected drop down
var dropDownText = document.getElementById(“YourTrackDropDown”).value;
// If selected text matches ‘Other’, display the text field.
if (dropDownText == “Systems_Analysis_and_Design_with_C_NET”) {
document.getElementById(“EnterFavoriteTrackLabelTwo”).style.display = ‘block’;
} else {
document.getElementById(“EnterFavoriteTrackLabelTwo”).style.display = ‘none’;
}
}
</script>
<script language=”javascript” type=”text/javascript”>
document.getElementById(“EnterFavoriteTrackLabelThree”).style.display = ‘none’;
// On every ‘Change’ of the drop down with the ID “YourTrackDropDown” call the displayTextField function
document.getElementById(“YourTrackDropDown”).addEventListener(“change”, displayTextField);
function displayTextField() {
// Get the value of the selected drop down
var dropDownText = document.getElementById(“YourTrackDropDown”).value;
// If selected text matches ‘Other’, display the text field.
if (dropDownText == “Graphics_Animation_and_Video_Editing”) {
document.getElementById(“EnterFavoriteTrackLabelThree”).style.display = ‘block’;
} else {
document.getElementById(“EnterFavoriteTrackLabelThree”).style.display = ‘none’;
}
}
</script>
<script language=”javascript” type=”text/javascript”>
document.getElementById(“EnterFavoriteTrackLabelFour”).style.display = ‘none’;
// On every ‘Change’ of the drop down with the ID “YourTrackDropDown” call the displayTextField function
document.getElementById(“YourTrackDropDown”).addEventListener(“change”, displayTextField);
function displayTextField() {
// Get the value of the selected drop down
var dropDownText = document.getElementById(“YourTrackDropDown”).value;
// If selected text matches ‘Other’, display the text field.
if (dropDownText == “Networking_Technologies”) {
document.getElementById(“EnterFavoriteTrackLabelFour”).style.display = ‘block’;
} else {
document.getElementById(“EnterFavoriteTrackLabelFour”).style.display = ‘none’;
}
}
</script>
<script language=”javascript” type=”text/javascript”>
document.getElementById(“EnterFavoriteTrackLabelFive”).style.display = ‘none’;
// On every ‘Change’ of the drop down with the ID “YourTrackDropDown” call the displayTextField function
document.getElementById(“YourTrackDropDown”).addEventListener(“change”, displayTextField);
function displayTextField() {
// Get the value of the selected drop down
var dropDownText = document.getElementById(“YourTrackDropDown”).value;
// If selected text matches ‘Other’, display the text field.
if (dropDownText == “Web_Presence_Solutions_and_Implementations”) {
document.getElementById(“EnterFavoriteTrackLabelFive”).style.display = ‘block’;
} else {
document.getElementById(“EnterFavoriteTrackLabelFive”).style.display = ‘none’;
}
}
</script>
<style>
#wpcf7-f1232-p1233-o1 span.wpcf7-form-control-wrap {
display: block;
}
#wpcf7-f1232-p1233-o1 label{width:100%;}
</style>

​Leave a Comment

Comment authors age:




How long it should take to get a great website and logo

How to create Bootstrap’s carousel to show multiple items per slide?