Contact form 7 Conditional Fields

With Contact form 7 Conditional Fields addon, you can show or hide form fields to users depending on what user chooses on the form as well as the logic set on the backend options panel. You can easily add any type of conditional logic to Contact Form 7. Just fill up the form below to understand the feature.

Multi-step Conditional Form

With Ultimate Addons, you can also create a Multi-step Conditional Form. Click here to see the demo.

Want to use this feature on your WordPress Site?

Glimpse of Backend Editing Panel (Click to Enlarge)

Would you like to try Conditional Field Pro ?

With Conditional Field Pro, you can set Advanced Conditional Logic for Range Slider, Star Rating, Country Dropdown, IP Geolocation etc.

Copy the Sample Code of the Above Form

<h4>Condition for Field Type: <strong>Text</strong></h4>
<p> Write name <strong>"John Doe"</strong> or <strong>"Abul Mia"</strong> to test it out</p>
<label> Your Name
     </label>

[conditional namefield]
<label> Is your Father name Jonathan Doe?
    [select menu-655 include_blank "Yes" "No"] </label><div class="clear"></div><br>
[/conditional]

<hr>

<h4>Condition for Field Type: <strong>Dropdown</strong></h4>
<p> Select <strong>"Yes"</strong> or <strong>"No"</strong> to test it out</p>
<label> Do you have any Physical Address?
    [select* menu-654 include_blank "Yes" "No"] </label>

[conditional address]
<label> Insert Your Address
     </label><div class="clear"></div><br>
[/conditional]

[conditional email]
<label> Insert Your Alternate E-mail
    [email your-email] </label><div class="clear"></div><br>
[/conditional]

<hr>

<h4>Condition for Field Type: <strong>Radio Buttons</strong></h4>
<p> Select <strong>"Option Two"</strong> or <strong>"Option Three"</strong> to test it out</p>

<label>Choose your preference</label>
    [radio radio-269 use_label_element default:1 "Option One" "Option Two" "Option Three"]<div class="clear"></div>

[conditional radio]
<label> Why did you select option two?
      </label><div class="clear"></div><br>
[/conditional]

[conditional radio-two]
<label> Why did you select option three?
      </label><div class="clear"></div><br>
[/conditional]

<hr>

<h4>Condition for Field Type: <strong>Checkboxes</strong></h4>
<p> Select <strong>"Option Two"</strong> or <strong>"Option Three"</strong> to test it out</p>

<label>Choose your preference</label>
    [checkbox checkbox-266 use_label_element "Option One" "Option Two" "Option Three"] <div class="clear"></div>

[conditional checkbox]
<label> Why did you select option two?
      </label><div class="clear"></div>
[/conditional]

[conditional checkbox-two]
<label> Why did you select option three?
      </label><div class="clear"></div>
[/conditional]

<hr>


<label> Insert Your E-mail
    [email* your-email-two] </label>

[submit "Submit"]