WordPress plugin: Conditional Fields for Contact Form 7
Conditional Fields for Contact Form 7 is a free WordPress plugin that adds conditional logic to Contact Form 7. It allows you to display fields based on the value of other fields.
Why Contact Form 7?
Contact Form 7 is one of the most flexible lightweight WordPress plugins to add forms to your WordPress site. Even though the name suggests it’s a plugin to create contact forms, you can create all sorts of complicated forms with it. The plugin’s logical structure and great coding allow for other plugins and themes to hook into and extend it’s functionality. It’s been my number one choice for many years. I integrated is seamlessly with WooCommerce, created reservation forms with it, school registration tools, and so on.
Why would we need Conditional Fields for Contact Form 7?
One feature I found myself coding up over and over again was conditional logic. By this I mean the ability to show certain fields, depending on the value of some other fields.
It’s a great way to make complex forms more compact, and present the user with only the information he is interested in.
See it in action
Below is a form generated with Conditional Fields for Contact Form 7
How do I use it?
The form above was created with Contact Form 7 and Conditional Fields for Contact Form 7. To reproduce this you will need to install both Contact Form 7 and Conditional Fields for Contact Form 7 on your WordPress website. Next you need to go to Contact > Add New. Enter the below code under the Form tab. The code is just basic Contact form 7 code, with the addition of a new special tag, the group tag.
Which fields would you like to view? [select pick-fields "Basic fields" "Advanced fields" "All fields"]
Your operating system
[select pick-os "Windows" "Mac" "Linux" "Android" "iOS" "Other"]
[group other][text other_os][/group]
Some advanced fields
After you entered this code, press Save, and them move to the Conditional Fields tab, where you can simply define the conditions for when each group should appear.
Finally, add the Contact Form 7 shortcode to the page where you want to display the form and you’re set!