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:

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.

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:

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.

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:

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