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.

What is Conditional fields?

Conditional fields for Contact Form 7 is a feature that allows for the dynamic display or hiding of form fields based on user input. By utilizing this feature, users can be presented with specific form fields based on how users answer previous questions or select options. For example, You have a form that asks users whether they’re interested in product A or product B. You can use conditional logic to show a set of fields specific to the product they selected. Overall, conditional logic is an incredibly useful feature for Contact Form 7 users
Conditional Field image | Ultimate Addons for Contact Form 7

Conditional Logic Demo

Just fill up the form below to understand the feature more.

    Condition for Field Type: Text

    Write name "John Doe" or "Abul Mia" to test it out




    Condition for Field Type: Dropdown

    Select "Yes" or "No" to test it out




    Condition for Field Type: Radio Buttons

    Select "Option Two" or "Option Three" to test it out




    Condition for Field Type: Checkboxes

    Select "Option Two" or "Option Three" to test it out




    Multi-step Conditional Form

    A multi-step form, also known as a multi-page form, is a type of web form that is split into multiple steps or pages.  This type of form can help to improve the user experience and increase form completion rates. And, in many cases, you may want to use Contact Form 7 Conditional logic to a multistep form. With Ultimate Addons, you can also create such 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>
    Write name <strong>"John Doe"</strong> or <strong>"Abul Mia"</strong> to test it out
    
    <label> Your Name
    [text* text-613] </label>
    
    [conditional namefield]
    <label> Is your Father name Jonathan Doe?
    [select menu-655 include_blank "Yes" "No"] </label>
    <div class="clear"></div>
    [/conditional]
    
    <hr />
    
    <h4>Condition for Field Type: <strong>Dropdown</strong></h4>
    Select <strong>"Yes"</strong> or <strong>"No"</strong> to test it out
    
    <label> Do you have any Physical Address?
    [select* menu-654 include_blank "Yes" "No"] </label>
    
    [conditional address]
    <label> Insert Your Address
    [text text-612] </label>
    <div class="clear"></div>
    [/conditional]
    
    [conditional email]
    <label> Insert Your Alternate E-mail
    [email your-email] </label>
    <div class="clear"></div>
    [/conditional]
    
    <hr />
    
    <h4>Condition for Field Type: <strong>Radio Buttons</strong></h4>
    Select <strong>"Option Two"</strong> or <strong>"Option Three"</strong> to test it out
    
    <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?
    [text text-388] </label>
    <div class="clear"></div>
    [/conditional]
    
    [conditional radio-two]
    <label> Why did you select option three?
    [text text-389] </label>
    <div class="clear"></div>
    [/conditional]
    
    <hr />
    
    <h4>Condition for Field Type: <strong>Checkboxes</strong></h4>
    Select <strong>"Option Two"</strong> or <strong>"Option Three"</strong> to test it out
    
    <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?
    [text text-390] </label>
    <div class="clear"></div>
    [/conditional]
    
    [conditional checkbox-two]
    <label> Why did you select option three?
    [text text-391] </label>
    <div class="clear"></div>
    [/conditional]
    
    <hr />
    
    <label> Insert Your E-mail
    [email* your-email-two] </label>
    
    [submit "Submit"]

    How to Setup?

    Need a step by step guide to understand how to setup this addon on your website?

    Setting up conditional logic in Contact Form 7 is relatively straightforward using Ultimate Addons for Contact Form 7. You can use the plugin’s built-in conditional logic functionality or you can upgrade to pro version for more advanced options. Once you’ve created your rules, you can preview your form to ensure that it’s functioning as expected.

    Click here to get started.

    Video on Contact Form 7 Conditional Logic Setup

    | Ultimate Addons for Contact Form 7

    Contact Form 7 Conditional Logic Addon - FAQ

    Yes, the Conditional Field addon is available for Free. You can set conditional logic for all the available option of Contact Form 7 (text Field, Email, Dropdown, Checkbox, Radio, Number, url and so on). However, we also have a pro version with which you can set conditional logic for advanced fields like Star Rating, Radio Buttons, Country Dropdown etc.

    The integration of conditional logic is important for creating complex forms. This feature can significantly enhance the user experience, It can also improve the rate of form completion, and collect more accurate data.

    Conditional logic is best suited for longer and complex forms. Forms which includes multiple questions and require a lot of user input. For example: registration forms, surveys, and job applications.

    No. Contact Form 7 doesn’t have this option. But you can use our “Ultimate Addons for Contact Form 7” plugin to install this feature. You can then build logical forms using Contact Form 7.
    Scroll to Top