Automatically show a field, like a checkbox, when you need more information based on a previous response. This is called Conditional Logic and your forms will be shorter, more personalized, and easier for your users to fill out.
Contact Form 7 doesn’t have conditional logic included and to build it yourself requires an advanced WordPress development skill level.
To add form logic, you don’t need to learn a new form builder. The CF7 Skins Conditional Logic add-on makes conditional logic possible from within your normal Contact Form 7 editor.
Show and Hide a Contact Form 7 Checkbox
“I want to show a few checkbox options if someone chooses a specific dropdown option.”
Let’s say you have a contact form that asks users to choose an option from a dropdown selector. If they select a particular option, you want to show them checkbox options.
In this example, if a user selects Billing and Payments from the dropdown, the form shows checkboxes asking for their subscription plan.
Step by step Instructions
For our practical examples, we will be using the CF7 Skins Conditional Logic Add-On.
- Install CF7 Skins Logic & activate it.
- In Contact Form 7, click the Logic tab.
- The checkbox field is the field we want to behave differently. For Select Item, choose the tag name of the checkbox you want to show or hide.
- Click Add Field.
- Since we want the checkbox to initially be hidden and eventually appear, we want to Show this checkbox.
- The ‘if’ statement determines if the checkbox will show when any or all actions/events happen. In this example, since we only have one case where we want the checkbox to show (when Billing and Payments is selected) choose All.
- Building off the if statement, this final line completes your logic setting: Show the subscription plans if the dropdown selector is (equals) Billing and Payments.
- Click save.
Tip: Read the statement backwards to check your logic: “When the topic equals billing and payments, then show the subscription plans.”
Try out this example on the demo form
Instructions – Choose Billing & Payments in the topic dropdown to show the hidden subscription question.
Remember that showing and hiding a checkbox is just one possibility. Conditional Logic is capable of much more:
- Dynamically change the form fields displayed based on user input.
- Show or hide form elements depending on the values input in other form fields.
- Display selected form items in response to options chosen.
Tip: Want to try out more demo forms with different kinds of logic? Go try them out in the CF7 Skins Logic Demo.
