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

Contact Form 7 Conditional field IF Then Else Logic
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
Contact Form 7 Conditional field IF Field value is greater then certain field new field will appear
and
If age is less then 18 years then School field will show

Contact Form 7 Conditional field IF Field value is less then new field appear
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
Pay me some, I will help you for CSS Issue Personally CLICK HERE….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: