In this tutorial we are going to see how we can create conditional fields in Contact Form 7 in a simple way.
Conditional Logic in Contact Form 7
As we know, Contact Form 7 is among the most popular WordPress form builder plugins. And it is not for less, it is easy to use and, although it provides us with the possibility of creating basic forms, for many occasions it is more than enough.
However, sometimes we need to add other functionalities, and for that we either use other advanced form plugins such as , or depending on what we want to add, we can add plugins to Contact Form 7.
For example, in the tutorial on we talked about the Flamingo plugin. This time we are going to use another one that will allow us to include conditional logic in CF7. Let’s see it!.
Installing the plugin
The first thing we will have to do is install a free plugin that we will find in the . This plugin is called Conditional Fields for Contact Form 7 and is developed by Jules Colle.
In the event that we want to add conditional fields to CF7 forms, it will be very practical, since basically what it does is allow us to add conditional logic to them.
So let’s install it. As always, we can download it to the computer and go to the WordPress dashboard, “Plugins/Add new/Upload plugin”, select the compressed file, install and activate, or go to “Plugins/Add new”, write the name in the search engine, and once located proceed in the same way, installing and activating it.
Although it is obvious, remember that this plugin works on CF7, it is essential that we have previously installed and activated it.
Well, as soon as we activate Conditional Fields for Contact Form 7 we will see that a new menu option appears within “Contact”, “Conditional Fields”. If we press it, it will show us a screen like this:
As we can see, it is about the configuration options. Firstly, it tells us the steps we must follow to create or edit conditional fields and then the basic animation settings for them.
In this case we will leave them as they are, we are going to go to the part that interests us, which is to include fields with conditional logic, but first we have to add some fields.
Add new fields
We will start from a contact form previously created with CF7, which, as we can see, has two text fields to fill in, email and message, and a checkbox for accepting the privacy policy.
Suppose that this form is from an online store, and that through it we want to make it easier for customers to contact us, either for some generic reason or because they need to manage an issue regarding their order.
So instead of using a text field to write the subject of the message, we will add one where you can select the reason for which you are contacting, which can be “General” or “Orders”, and then another where we will break down more specifically what management you want to carry out for that order, if it is to track it, manage a return or request an invoice.
Well, we are going to do it, for this we will go to the WordPress desktop, “Contact”, and we will click on the “Edit” option within the form that we want to modify.
Being in the “Form” tab, we place ourselves in the place where we want to insert the fields, in this case between the email and the message, and we will click on “drop-down menu” to add the first one, and then we insert it.
Next we will do the same with the following to choose between the available options if we have marked “Orders”, but we are going to add it within a conditional field so that we can later configure when we want the drop-down to be displayed. So we click on “Conditional fields Group” and we will fill it in as follows:
Now we click on “Insert”. We will see that it adds a code within which we will have to add the dropdown. We simply place ourselves in it, and click again on “dropdown menu” to add the following field:
And again we insert. In this way we will be able to add the two fields, the subject and the options for contacts about orders. The code would be this:
Privacy Policy: I have read and accept the Privacy Policy. The person responsible for the file, RESPONSIBLE, will use this information to respond to contact requests. The data sent will be stored in HOSTING within the EU. You can access, rectify or delete them if you wish.
Well, we have already included them. If we save we will see that the second field is not being displayed, so we are going to make it visible only when we have chosen “Orders” in the subject of the message.
Add conditional logic
To add conditional logic we have to go to the “Conditional Fields” tab. Once we enter we will see that it offers us the possibility of adding a new condition, so we will click on the “Add new conditional rule” button to do so.
Now we will have to fill it. Here it is a question of indicating at what moment the content of the conditional group that we added in the previous point is going to be displayed.
First we will select this group, “Option_order”, in “Select group”. Then in “Select field” we have to indicate the “Subject”, and finally establish the condition that this is equal to Orders, since it is at that moment when the second field has to be displayed. It would look like this:
And with this we would have it ready, we have added a conditional field whose visibility depends on the value of another field. Easy right? :).
Summary and conclusion
CF7 is a very popular plugin for creating basic forms in WordPress. To add conditional logic to it we can use the Conditional Fields for Contact Form 7 plugin, which we will have to install and activate.
Once we do that, we’ll edit our form and include a conditional group that will contain the fields we want to display based on the value of another field. Then we will have to add the specific condition, and that’s it.
We hope it has been useful to you. And you already know it! If you subscribe to you will have access to to get the most out of WordPress and learn about many other topics. We are waiting for you inside! 🙂
Facebook Comments
Disqus