Greater then or Less then Conditional fields in Contact Form 7 : Show different fields based on a specific field value

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>

If you have any issue feel free to ask me question here in comments section

OR

You can take my personal help in skype : om2000_cuet
Like this post?
Tweet
Email
WhatsApp
Print
Like this:
Like Loading...


	
Related