Sometimes you may want to show certain fields based on the value of another field.
For example
If age is greater then 18 Years you want to show Profession field
and
If age is less then 18 years then School field will show
But you can use this technique for any other conditions
Here i am sharing you the Contact Form 7 code and corresponding jQuery code
*** Code for Contact Form 7 (You have to put it in Contact Form 7 )
<fieldset>
<label> Your Name (required) [text* your-name] </label>
<label> Your Email (required) [email* your-email]</label>
<label> Age [text your-age] </label>
<div id="group-professiona" class="hide">
<label> Profession [text your-profession] </label>
</div>
<div id="group-schoola" class="hide">
<label> School/College [text your-school]</label>
</div>
[submit "Send"]
</fieldset>
* JQuery Code (you have to put it either in header.php or using Simple Custom CSS or JS plugins)
<script>
jQuery(document).ready(function(){
jQuery('input[name="your-age"]').bind('input', function(){
var age=jQuery( 'input[name="your-age"]' ).val();
if (age <=18 && age>0)
{
jQuery("#group-professiona").addClass("hide");
jQuery("#group-schoola").removeClass("hide");
} else if(age>18) {
jQuery("#group-professiona").removeClass("hide");
jQuery("#group-schoola").addClass("hide");
}
if( jQuery( 'input[name="your-age"]' ).val().replace(/^\s+|\s+$/g, "").length === 0) {
jQuery("#group-professiona").addClass("hide");
jQuery("#group-schoola").addClass("hide");
} }); });
</script>
