Conditional Fields with Contact Form 7
Create advanced forms with conditional logic for your visitors
Have you ever needed to create a complex contact form? One where the visitor can conditionally access different queries depending on conditions? Let’s see a hypothetical scenario.
You have a product, and you need to showcase its features per demand.
- The product has two different sizes and colors.
- We need to let the visitor decide which variation likes most and get an email in our inbox.
This can prove to be very useful either as a marketing strategy (we get data directly from your visitor) or as a direct sales mechanism (we can even get an order from the customer this way). Of course, a contact form can’t replace existing shopping plugins (like WooCommerce) but can be useful for small/medium enterprises who seek to embed an additional marketing/sales tool on their website.
After installing the plugins, add a new contact form and check the configuration.
Contact forms have been evolved from simple communication tools to everyday marketing platforms. On Plethora Themes we include Contact Form 7 to the recommended plugins in every theme as we believe it’s the most simple and at the same time, flexible Contact Form system available on WordPress. The plugin is been authored and maintained by Takayuki Miyoshi.
The use of Contact Form 7 is based on Tag Names. Using the tag generator tools, add some tags which will be displayed in the contact form. The syntax is very simple. You can find all the syntax rules here https://contactform7.com/tag-syntax/
Let’s use a small example. Assuming we need to create a contact form where the visitor is asked to select between two sizes of t-shirts and a number of available colors. We have
- a small form type t-shirt and a medium form type t-shirt.
- for small t-shirt type, we have three colors: black, blue and red.
- for medium t-shirt type, we have another three colors: black, white and green.
The visitor will be able to select the t-shirt size and then a color.
First of all, let’s add a new Contact Form and give it a title.
By default, each new form has these basic options enabled: name, email, subject, message and the submit button. We can remove the Subject as we don’t need it. The asterisk next to each tag type means the field is required.
We need to add four new tags and two groups.
- The tag Color will be the input for the Size
- The tag SmallColors will be the input for the colors of the small size t-shirt type
- The tag MediumColors will be the input for the colors of the medium size t-shirt type
- The group SmallSizeColors will be the one handle for the condition and
- The group MediumSizeColors will be the other handle
The syntax is simple: we set the tags and, add the groups, one after the other. We make sure the critical tag is before the groups, so we can create the conditional rules. The form is going to look like this:
<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
<label> Select Size (required)</label>
[checkbox* Size exclusive "Small" "Medium"]
<label> Select Color </label>
[select SmallColors "Black" "Blue" "Red"]
<label> Select Color </label>
[select MediumColors "Black" "White" "Green"]
<label> Leave a message
[textarea your-message] </label>
Note that SmallColors and MediumColors (the inputs for the colors) are inside each corresponding group, so the colors will only appear if the visitor selects the appropriate size. After saving the form, let’s add the additional logic. We need to go to Conditional Fields tab and create the rules according to our plan. It will look like this:
We’ve set these rules to make the form display a different group for each size. Now, let’s configure the email. We need to include all possible tags; the form will display those who follow the conditional rules
From: [your-name] <[your-email]>
Hello pal! I'm interested in this variation
This form has been sent from the conditional form of my website!
Although the groups will become available as tags on the Mail, we shall not include any of them. Instead, we have to use only those tags who actually contain options, in our case SmallColors and MediumColor. As mentioned before, Contact Form 7 will include only those tags that were actually selected and leave an empty space in the place where unused tags are
The form is now ready, and we can copy the shortcode and paste it anywhere on our website to be displayed. This is a just small example of how conditional logic can be used with Contact Form 7. With a little work, you can produce a lot more complex forms to get the best out of your surveys.