Skip to main content

How to Use Conditional Visibility in AI Forms (Show/Hide Elements)

Learn how to show or hide form elements based on a client's answer to a previous question using conditional visibility.

Written by Xenios Charalambous
Updated over a month ago

Conditional visibility lets you create smarter, more dynamic forms by showing or hiding elements based on how a client answers a previous question. Instead of overwhelming clients with every possible field, you can reveal only the questions that are relevant to their situation.


What is Conditional Visibility?

Conditional visibility is a rule you set on any form element that says: "Only show this element when a specific answer is selected on a previous question."

When a client fills out your form, elements with a visibility condition start out hidden. They only appear once the client selects the matching answer on the trigger question. If the client changes their answer, the element hides again automatically.


How to Set Up Conditional Visibility

Follow these steps to add a visibility condition to any element in your form.

Step 1: Open Your Form

Go to AI Forms and open the form you want to edit.

Step 2: Add a Trigger Question

Make sure you have a Single Choice or Multiple Choice question on the page. This will be the trigger question that controls visibility. It must be positioned above the element you want to show or hide.

Step 3: Hover Over the Target Element

Hover over the element you want to conditionally show or hide. A "Conditional" button will appear in the top-right corner of the element. This button only appears when there is at least one eligible trigger question above the element on the same page.

Step 4: Click "Conditional"

Click the "Conditional" button. A configuration panel will appear above the element with the text "Show when".

Step 5: Select the Trigger Question

From the first dropdown, select the question that should control this element's visibility. Only eligible questions (Single Choice or Multiple Choice, on the same page, positioned above) will appear in the list.

Step 6: Select the Answer Value

From the second dropdown, select the specific answer option that should make this element visible. If the trigger question has an "Other" option enabled, you can also select "Other" as the trigger value.

Step 7: Save Your Form

Save the form. The element will now display a blue indicator showing its visibility rule, for example: Show when "Do you have injuries?" = "Yes".


Rules and Constraints

Keep these rules in mind when using conditional visibility:

  • Same page only — The trigger question and the conditionally visible element must be on the same page of your form.

  • Trigger must come first — The trigger question must be positioned above the element it controls. You cannot reference a question that comes after the target element.

  • Single Choice or Multiple Choice only — Only Single Choice and Multiple Choice questions can act as triggers. Other question types (short answer, rating, slider, etc.) cannot be used.

  • One condition per element — Each element can have only one visibility condition. You select one trigger question and one answer value.

  • Any element type can be hidden — You can apply conditional visibility to any element: questions, headings, paragraphs, images, dividers, and more.

  • Hidden elements are skipped during validation — If a conditionally hidden element is marked as required, it will not block form submission when it is not visible.

  • Hidden element responses are removed — When a client submits the form, responses for any elements that are hidden at the time of submission are automatically removed from the submission data.


Example Use Cases

Here are some practical ways to use conditional visibility in your forms:

  • Injury follow-up: Ask "Do you have any injuries?" (Single Choice: Yes / No). Set a follow-up text field "Please describe your injuries" to only show when the answer is "Yes".

  • Supplement details: Ask "Are you currently taking supplements?" (Single Choice: Yes / No). Show a follow-up question "List your current supplements" only when "Yes" is selected.

  • Experience-based questions: Ask "What is your training experience?" (Single Choice: Beginner / Intermediate / Advanced). Show an advanced programming preferences question only when "Advanced" is selected.

  • Diet-specific fields: Ask "Do you follow a specific diet?" (Multiple Choice: Vegan / Keto / Gluten-Free / None). Show a "Describe your dietary restrictions" field when "Vegan" is selected.

  • Conditional media or instructions: Show a specific instructional image or heading only when a particular answer is chosen, keeping the form clean and focused for everyone else.


How to Remove a Visibility Condition

There are two ways to remove a visibility condition from an element:

  • From the blue indicator: When an element has a visibility condition, a blue bar appears above it showing the rule. Click the X button on the right side of this bar to remove the condition.

  • From the configuration panel: Click the "Conditional" button to open the configuration panel, then click the X button to clear the condition.

After removing the condition, the element will always be visible to clients. Remember to save your form after making changes.

Did this answer your question?