Show/Hide Fields

Create dynamic forms that show or hide fields based on user responses using conditional visibility rules.

5 min read

Static forms ask every question to every respondent, regardless of relevance. Conditional visibility changes that. With show/hide rules, your forms adapt in real time β€” displaying only the fields that matter based on what the respondent has already answered. The result is a shorter, more focused experience that increases completion rates and improves data quality.

How Conditional Visibility Works

Every field in BttrForm can have one or more visibility rules attached to it. A visibility rule consists of three parts:

  1. Source field β€” the field whose value is evaluated
  2. Operator β€” the comparison logic (equals, contains, is greater than, etc.)
  3. Value β€” the target value to compare against

When a respondent fills out your form, BttrForm evaluates these rules in real time. If the conditions are met, the target field appears with a smooth animation. If the conditions are no longer met (for example, the respondent changes their answer), the field hides again and its value is cleared automatically.

Hidden Field Data

When a field is hidden by a visibility rule, its value is not included in the submission. This prevents stale or irrelevant data from polluting your responses. If you need to preserve hidden field values, enable the "Keep hidden field values" option in the field's advanced settings.

Setting Up Your First Visibility Rule

Follow these steps to add conditional visibility to any field in the form builder:

Step 1: Select the Target Field

Click on the field you want to show or hide conditionally. This is the field that will appear or disappear based on the respondent's answers. In the right-hand settings panel, scroll down to the "Visibility" section.

Step 2: Add a Condition

Click "Add Condition" to create a new visibility rule. You will see three dropdown menus:

  • If β€” select the source field (the question whose answer triggers the visibility)
  • Operator β€” choose the comparison type
  • Value β€” enter the value to match against

Step 3: Choose the Right Operator

BttrForm provides operators tailored to each field type:

Field TypeAvailable Operators
Text / Emailequals, not equals, contains, starts with, ends with, is empty, is not empty
Number / Ratingequals, not equals, greater than, less than, between, is empty
Dropdown / Radioequals, not equals, is one of, is not one of
Checkboxis checked, is not checked, includes, excludes
Dateequals, before, after, between, is empty

Step 4: Test in Preview

After configuring the rule, click "Preview" to test the behavior. Fill in the source field with different values and confirm the target field appears and disappears as expected.

Pro Tip

Use the preview's mobile toggle to verify that conditional fields animate smoothly on smaller screens. A jarring layout shift on mobile can confuse respondents and hurt completion rates.

Working with Multiple Conditions

Real-world forms often require more than a single condition. BttrForm supports two modes for combining multiple conditions on a single field: AND logic and OR logic.

AND Logic (All Conditions Must Match)

Use AND when the field should only appear if every condition is true. For example, show a "Company Size" field only when the respondent selects "Business" as their account type and selects "United States" as their country.

To use AND logic, add multiple conditions within the same condition group. By default, all conditions within a group are combined with AND.

Condition Group:
  IF "Account Type" equals "Business"
  AND IF "Country" equals "United States"
  THEN show "Company Size"

OR Logic (Any Condition Can Match)

Use OR when the field should appear if at least one condition is true. For example, show a "Dietary Restrictions" field if the respondent selects either "Lunch" or "Dinner" from a meal preference question.

To use OR logic, click "Add Condition Group" instead of "Add Condition." Each condition group is evaluated independently, and the field is shown if any group's conditions are satisfied.

Condition Group 1:
  IF "Meal Preference" equals "Lunch"
OR
Condition Group 2:
  IF "Meal Preference" equals "Dinner"
THEN show "Dietary Restrictions"

Combining AND and OR

You can nest AND within OR by placing multiple conditions inside separate condition groups. Each group uses AND internally, and the groups themselves are combined with OR. This gives you the flexibility to express complex visibility logic without writing code.

Keep It Simple

Avoid chaining more than three or four condition groups on a single field. Deeply nested logic is hard to debug and can confuse your team when editing the form later. If your visibility logic is getting complex, consider splitting the form into multiple pages with skip logic instead.

Common Patterns

Follow-Up Questions

The most popular use case. Ask a broad question first, then reveal follow-up details based on the answer.

  • "Did you experience any issues?" (Yes/No)
  • If Yes -> show "Please describe the issue" (text area)
  • If Yes -> show "How urgent is this?" (rating)

Role-Based Fields

Tailor forms to different audiences by showing role-specific questions.

  • "Your role" (dropdown: Manager, Developer, Designer, Other)
  • If Manager -> show "Team size" and "Budget range"
  • If Developer -> show "Primary language" and "Years of experience"
  • If Other -> show "Please specify your role" (text)

Progressive Disclosure for Long Forms

Instead of overwhelming respondents with 30 fields at once, start with essential questions and reveal additional sections as they engage. This creates a sense of progress and keeps the form feeling manageable.

Troubleshooting

Field not appearing: Double-check that the source field's value exactly matches your condition value. String comparisons are case-sensitive by default. Use the "contains" operator for partial matches.

Field flickers on load: This can happen if the source field has a default value that matches the condition. Remove the default value or set the initial visibility to "hidden" in the field settings.

Hidden field still submitting data: Ensure "Keep hidden field values" is turned off in the field's advanced settings. When enabled, hidden fields retain and submit their last-entered value.

Next Steps

Conditional visibility controls individual fields. For controlling which pages respondents see, check out the Skip Logic guide. For computing values from other fields, see Field Calculations.

Was this helpful?

Show/Hide Fields | BttrForm