Contact form 7 plugin is a simple contact form plugin. It has a well documentation. However, it doesn’t come with conditional fields.
Luckily, there is a conditional fields plugin that works for the contact form 7 plugin calls “Contact Form 7 – Conditional Fields” plugin.
In this post, I will share how to use both contact form 7 and contact form 7 – conditional fields plugin together. First, you need to install and activate both plugins.
Next, navigate to Contact menu and click on Contact Forms, you will see one form names “Contact form 1” there. We will this form for our tutorial. Go ahead, click on edit menu for this form.
At the form tab where you can add the form fields there, you will see the code below.
<label>
Your name [text* your-name] </label>
<label>
Your email [email* your-email] </label>
<label>
Subject [text* your-subject] </label>
<label>
Your message (optional) [textarea your-message] </label>
[submit "Submit"]We will add new radio fields with 2 options. Each option will show the related message box. First, we will remove “Your message” field and add “radio buttons” instead.
Click on “radio buttons” and fill in Name and Options as below.
Technical option is our default. Now you code will look like this.
<label>
Your name [text* your-name] </label>
<label>
Your email [email* your-email] </label>
<label>
Subject [text* your-subject] </label>
[radio contact-options use_label_element default:1 "Technical" "Sale"]
[submit "Submit"]Next, we will add two message boxes. One is for Technical option and another one is for Sale option. If users click on Technical option, the message box for sale will disappear. The message box for Technical will appear. Same thing with Sale option.
Now, for adding the conditional fields group, simply click on “Conditional Fields Group”. Then gives the name and click on “Insert Tag” button.
You will get the code below in the Form tab.
[group Technical-selected] [/group]In side the group tag, we want to add the message field for Technical option. Click on “text area”, give the name and insert the tag inside the group tag.
You will get the code below.
[group Technical-selected]
<label> Message for Technical
[textarea technical-msg] </label>
[/group]Now do the same for Sale option. You can not duplicate the existing tag in the Form tab and change the name. You can click on the fields button list only.
[group Sale-selected]
<label> Message for Sale
[textarea sale-msg] </label>
[/group]Below is what your form look like. The style is not the same as mine since you will use your own theme style. But the fields will be the same as mine.
When you click on the radio button, nothing shows on the form yet because we don’t add any conditional logic. To do that, click on “Conditional fields” tab. Then click on “+add new conditional rule” button. Next, show the group list. From above, you create two groups which are Technical-selected and Sale-selected.
We want to show the technical message box when users click on Technical option. Same thing with Sale option. Below is how we set the rules.
Now your form will look like this.
When users click on Technical option, the message for Technical will appear. If the Sale option is selected, the message for Sale will appear instead.
The last thing, we will set the mail message. Since we add new fields in the Form tab, we need to add those new fields in the Mail tab as well. Otherwise, when users receive the email, they won’t see the new fields we add. To do that, click on Mail tab and add the code below into Message body field.
From: [your-name] <[your-email]>
Subject: [your-subject]
Message Body:
[contact-options]
[technical-msg]
[sale-msg]
We add [contact-options], [technical-msg] and [sale-msg] fields in the mail message body. But we don’t want to show the empty message with its label on the mail message so we want to hide it. To do that, you will mark on “Exclude lines with blank mail-tags from output” option. If you want to set the style from your form and be able to show in your users email, you want to mark on “Use HTML content type” option. Now, save your changes.
Finally, it is time to test it. Go ahead, publish the form and send some message via the form and see the result in your email.
Read More at Contact Form 7 – Conditional Fields tutorial
Read More about Contact Form 7 – Conditional Fields Pro
I hope you will get the idea how to use Contact Form 7 – Conditional Fields plugin. The plugins are free but if you don’t mind to spend some money to get more abilities to manage your form, you can buy the Pro version or pick other form plugins in the market. Or if you have time and skills, you can create your own form by coding yourself (create form, do the form validation, add the validation message, create the email template for all devices). Or you can hire the WordPress developers. With hiring the developers, it is one-time payment while buying the paid plugin, you will pay every year in order to get the regular update from the plugin. It is all your choice. Hope this post will be useful for you.
