Tutorial: How to set up Conditional Fields for Contact Form 7

This post relates to an older version of Conditional Fields for Contact Form 7.
Check out the new tutorial.

Getting started

Make sure Contact Form 7 and Conditional Fields for Contact Form 7 are both installed on your WordPress site.

In your WordPress admin, go to Contact > Add New to create a new form.

I will use the form below as an example for this entire article. Obviously you can create your own form.

    Basic Fields

    Your name

    Your email

    Advanced Fields

    Your operating system

    Some advanced field

    Here’s the code:

    <fieldset>
    <legend>Basic Fields</legend>
    
    Your name
    [text name]
    
    Your email
    [text email]
    </fieldset>
    
    <fieldset>
    <legend>Advanced Fields</legend>
    
    Your operating system
    [select pick-os "Windows" "Mac" "Linux" "Android" "iOS" "Other"]
    
    Some advanced field
    [text adv]
    </fieldset>

    Add conditional logic to your form

    Now let’s create a drop down list to select which fieldset to show, and add a text-field if a user picks Other from the Operating System select box.

    At the top of the form we will add a drop down list to select which field sets should be shown.

    Which fields would you like to view? [select pick-fields "Basic fields" "Advanced fields" "All fields"]

    Create field groups

    You will notice a new Contact form 7 tag called Conditional fields Group.

    conditional-fields-group

    After you click this a popup will appear where you can choose a name.

    conditional-fields-group-popup

    Click Insert tag to insert the group.

    To put a part of the form that you would like to be able to show and hide based on some conditions, you will need to wrap it between these group tags, like so:

    [group basic-fields]
    
    <fieldset>
    <legend>Basic Fields</legend>
    
    Your name
    [text name]
    
    Your email
    [text email]
    </fieldset>
    
    [/group]

    Note that groups can also be nested. So for example, it’s possible to create a group around the Advanced fieldset, and add another group inside it that can be triggered based on the OS choice.

    [group advanced-fields]
    
    <fieldset>
    <legend>Advanced Fields</legend>
    
    Your operating system
    [select pick-os "Windows" "Mac" "Linux" "Android" "iOS" "Other"]
    [group other][text other_os][/group]
    
    Some advanced fields
    [text adv]
    </fieldset>
    
    [/group]

    Creating conditions

    After adding the groups and creating the additional fields it is very important to save your form first. Otherwise the created fields and groups will not show up in the Conditional Fields tab.

     

    After saving the form, we can move to the Conditional Fields tab to create the conditions.

    conditional-fields-tab

    Click the Add new conditional rule link. In order to show basic form when the user picks “Basic form” in the dropdown list, add the folowing rule:

    rule

    It is very important to get the spelling of the value field correctly. The value field is case-sensitive. So entering basic fields or Basic-fields (instead of the exact phrase Basic fields) will not work! The value needs to correspond exactly to one of the  values in the pick-fields dropdown list.

     

    The other conditions can be added in the same manner.
    In order to display multiple groups with only one field, you can add multiple lines. In our example if someone selects to show All fields, it would need to display both field groups. we can achieve this by adding these two rules:

    • if pick-fields equals All fields then show basic-fields
    • if pick-fields equals All fields then show advanced-fields

    Putting it all together

    If you have added all conditions, it should look something like this:

    conditional-fields-for-contact-form-7

     

    The full form code:

    Which fields would you like to view? [select pick-fields "Basic fields" "Advanced fields" "All fields"]
    
    [group basic-fields]
    <fieldset>
    <legend>Basic Fields</legend>
    
    Your name
    [text name]
    
    Your email
    [text email]
    </fieldset>
    
    [/group]
    [group advanced-fields]
    
    <fieldset>
    <legend>Advanced Fields</legend>
    
    Your operating system
    [select pick-os "Windows" "Mac" "Linux" "Android" "iOS" "Other"]
    [group other][text other_os][/group]
    
    Some advanced fields
    [text adv]
    </fieldset>
    
    [/group]

    And here is the final result:

      Which fields would you like to view?

      Basic Fields

      Your name

      Your email

      Advanced Fields

      Your operating system

      Some advanced fields

      _

      Extra: Customizing the email message

      Since version 0.2 of the plugin it is possible to generate the email message based on which groups were visible. To do this you can simply wrap parts of the email body with [group-name] … [/group-name] tags.

      Let’s look at these 2 scenario’s, for example

      Scenario 1

      Let’s say the user filled in the form like this:

      scenario-1

      And the email message we would like to get is:

      Dear Admin,

      Someone filled out the Advanced fields on your site. The person is using Linux as an OS and he says: “i’m so advanced.

      Cheers!

      Scenario 2

      Let’s say the user filled in the form like this:

      scenario-2

      And the email message we would like to get is:

      Dear Admin,

      Someone filled out the Basic fields on your site. The person’s name is Jules Colle and his email address is my-super-secret@email.com

      Cheers!

      The Mail Message Body

      The desired scenario’s can be met by entering the following text in the Message body in the contact form 7 Mail tab

      Dear Admin,
      
      [basic-fields]
      Someone filled out the Basic fields on your site.
      The person's name is [name] and his email address is [email]
      [/basic-fields]
      
      [advanced-fields]
      Someone filled out the Advanced fields on your site.
      The person is using [pick-os] as an OS and he says: "[adv]"
      [/advanced-fields]
      
      Cheers!