Conditional Field

In this article, we will try to explain how to create a Conditional Form using Contact Form 7 with the help of our Free Addon “Contact Form 7 Conditional fields”.

What’s needed

  • Make sure Contact Form 7 and Ultimate Addons for Contact Form 7 are installed on your WordPress site.
  • Go to Contact -> Ultimate Addons menu in your WordPress Dashboard and enable the Conditional Field checkbox. Then click the Save Changes button. This will allow the “Contact Form 7 Conditional Logic addon” settings.
Contact form 7 Conditional Field 1 - Themefic

Conditional Form – Live Example

In this tutorial, we will create a Conditional Form like the example below. You can, for sure, create your logical form following the same steps.


    Check our main demo to see all the supported fields for CF7 Conditional Fields.

    Conditional Form Creation

    Go to Contact -> Add New in your WordPress Dashboard to create a new form.  You will get a contact form editor on your admin screen with a Conditional Wrapper button.

    Contact form 7 Conditional Field 2 - Themefic

    Insert Conditional Wrapper

    Now click on Conditional Wrapper. You will find a name field. You can edit this field as you want. Please ensure every Conditional Wrapper name field is unique (for better identification purposes). After changing the name field, click the insert tag button.

    Contact form 7 Conditional Field 3 - Themefic

    Formatting the Wrapper

    After inserting the tag, you will find the tag in the editor, and it should look something like this “[conditional conditional-928][/conditional]”. For better identification, you can rename these wrappers in your identifier. For example, [conditional address][/conditional]

    Now time to rearrange your codes. Let’s say we want to add a condition like this:

    • If the user selects “Yes”, we will show an address field
    • If the user selects “No”, we will show them an email field.

    If you check the screenshot below, we have created two separate fields (Address & Email) and wrapped each field with two separate conditional wrappers:

    condition - Themefic

    Now, go ahead and save the form. (If you want to add more condition, just wrap each of the hidden fields with a separate “conditional wrapper”)

    Conditions Setup

    After you save the form, go to UACF7 Conditional Fields tab panel above your admin panel of the contact form alongside Form, Mail, Messages, and Additional Settings. Click on it!

    condition 1 - Themefic

    After clicking the UACF7 Conditional Fields tab, you should see something like the above. Click Add New Rule Button. Then you will get a few fields to make logic for your conditional form.

    Now time to make logic; let’s describe it step by step:

    • Step one: The first field is “Show” or “hide”. If you select “show”, your condition field will show when the logic is true. If you select “hide”,  your condition field will be hidden when the logic is applicable.
    • Step Two: Next is the conditional element. You can select which conditional field you want to add to this logic. For example, in our case, “the address” field and “alternate email” field.
    • Step Three:  Next is, if “anyor “all”.  If you select “Any”, that means if any of the below logic is true your condition will be working. On the other hand, if you select “All”, all the logic set below needs to be true for showing your conditional field.
    • Step Four: Click the “Add Condition” button.

    After clicking the “Add Condition” button, you will get three fields for making conditions:

    • Select a form tag from the first field. (Based on this field, your above conditional field will show)
    • Then is the logic variant. The default is “Equal”.
      • Equal -> If your selected field value is “Equal” to the provided value.  Example: If the user selects “Yes”, then your conditional field will show.
      • Not Equal -> If the user value is “Not Equal” with your condition value, then your conditional field will show.
      • Greater than -> If the value is “Greater than” your condition value, then your conditional field will show.
      • Less than -> If the value is “Less than” your condition value, then your conditional field will show.
      • Greater than or equal to -> This logic can take two logic simultaneously. If the value is Greater than or equal to your condition, then your conditional field will show.
      • Less than or equal to -> This logic can take two logic simultaneously. If the value is Less than or equal to your condition value, then your conditional field will show.
    • Next is the condition value. Set your exact value to meet the condition. Note: The spelling of the value field is important. The value field is case-sensitive. So entering  John doe or John-Doe (instead of the exact phrase John Doe) may not work! The value needs to correspond exactly.

    The screenshot below should clarify some confusion, and you will see how the above form’s condition was setup:

    Screenshot at Mar 07 16 54 47 - Themefic

    After you are done setting up all your conditions, save the contact form.

    Conditional field set to send email

    Incorporate a conditional wrapper around the body of the message in order to ensure that when the condition is not met, the field will not be transmitted via email. Conversely, when the condition is satisfied, the field details will be forwarded via email.

    conditional field - Themefic

    Time to Publish

    Copy the form’s shortcode, and paste it wherever you want to show your form (Pages/Posts/Custom Post Types/Sidebars). The result should be something similar to the above form.


    Watch Complete Video

    If you are still confused, we suggest you watch this video. In this video, we tried to describe the whole step of Conditional Fields for Contact Form 7:


    Full-Form Code

    Here is a sample code of our above form:

    <label> Your name
        [text your-name] </label>
    
    <label> Your email
        [email your-email] </label>
    
    <label> Do you have any Physical Address? (Select <strong>"Yes"</strong> or <strong>"No"</strong> to test the conditional feature)
        [select menu-654 include_blank "Yes" "No"] </label>
    
    [conditional address]
    <label> Insert Your Address
        [text text-612] </label>
    [/conditional]
    
    [conditional email]
    <label> Insert Your Alternate E-mail
        [email your-email] </label>
    [/conditional]
    
    [submit "Submit"]
    

    Still Not Clear? Please contact us. If you are a free User, you can open a ticket from here. If you are a pro user, you can open a ticket from here.