How To Show Or Hide Fields With Conditional Logic
Conditional logic allows you to change how users see your form, based on their previous responses.
Before we get started, it's worth noting that you can also do the following with conditional logic:
How to show or hide fields with conditional logic
Let's say you own a cake shop.
If somebody wants to buy a wedding cake off you, wouldn't it be cool to ask them more detailed questions about their wedding cake, without needing to bother them about birthday cakes?
That's exactly what conditional logic is for - here's an example form:
You can show or hide almost any type of field, and you can show or hide fields that are on your thank-you page, as well as your main form.
This means conditional logic could be used to:
- Show "prompts" in the form of decorative paragraphs or headers in your form
- Ask additional questions from users who answered in a particular way
- Show a particular message on your thank-you page based on a user's response.
We've seen plenty of very creative uses of conditional logic that even estimate pricing based on several inputs and show the results on the last step!
Here's how to show or hide fields based on conditional logic...
1.) Select the field you wish to show / hide
First, open up the form builder and click the field you wish to show or hide. In this example, let's say we only want to show "Alright, tell us more about your wedding cake..." to certain users:
2.) Hit "Edit logic"
Because this field can be shown or hidden with conditional logic, a "Conditional logic" panel appears in the left-hand panel when a field is selected. Find this panel and hit the "edit logic" button:
In this example, we wish to show this field only when a user wants a wedding cake. So, let's find the field that asks them which type of cake they want and only show the field if it they have selected "Wedding cake":
In this example, we didn't need to edit whether we show or hide the field, but could have done so in the first dropdown.
It's possible to chain together AND / OR statements to get to some pretty complex logic!
Hit "Update", and don't forget to save your form.
You'll notice your field now has gone slightly transparent - this is only visible to you, and shows that the field has conditional logic applied.
That's it - you've successfully edited a field's visibility based on conditional logic!