Conditional Logic

Conditional logic lets you show or hide fields based on what users enter in other fields. Create dynamic, personalized forms that adapt to user input.

How it works

1. User fills out a field
2. Conditions are evaluated in real-time
3. Dependent fields show or hide instantly
4. No page reload required

Setting up conditions

1. Select the field you want to show/hide
2. Click Conditional Logic in field settings
3. Enable conditional logic
4. Define your rules

Basic rule structure

IF [field] [operator] [value]
THEN [show/hide] this field

Example:

IF "contact_method" IS "phone"
THEN SHOW "phone_number" field

Operators

Actions

Show field

Field is hidden by default, shown when conditions are met.

Action: Show
Default state: Hidden

Hide field

Field is visible by default, hidden when conditions are met.

Action: Hide
Default state: Visible

Multiple conditions

Combine conditions with AND/OR logic:

All conditions (AND)

All conditions must be true:

Show "corporate_fields" section when:
- company is not empty AND
- employees greater than 10 AND
- country is "US"

Any condition (OR)

At least one condition must be true:

Show "contact_preferences" when:
- newsletter is checked OR
- updates is checked OR
- offers is checked

Examples

Contact method selection

Show appropriate field based on preferred contact method:

Fields:

1. contact_method (radio): Email, Phone, Mail
2. phone_number (phone): Hidden by default
3. mailing_address (textarea): Hidden by default

Conditions:

phone_number:
  Show when: contact_method is "phone"

mailing_address:
  Show when: contact_method is "mail"

Email field is always visible (default).

Budget-based questions

Show different options based on budget:

premium_options:
  Show when: budget greater than 5000

basic_options:
  Show when: budget less than 1000

rush_available:
  Show when: budget greater than 2000

Business vs. personal

Different fields for business customers:

company_name:
  Show when: customer_type is "business"

tax_id:
  Show when: customer_type is "business"

job_title:
  Show when: customer_type is "business"

Checkbox expansions

Show details when checkbox is selected:

dietary_details:
  Show when: has_dietary_restrictions is checked

accessibility_needs:
  Show when: needs_accessibility is checked

Nested conditions

Chain conditions for complex flows:

1. customer_type (radio): Personal, Business

2. business_size (select): Small, Medium, Enterprise
   Show when: customer_type is "business"

3. enterprise_contact (text):
   Show when: business_size is "enterprise"

Form sections

Apply conditional logic to groups of fields using HTML dividers:

[HTML: <div class="business-section">]
  Company Name
  Tax ID
  Employee Count
[HTML: </div>]

Condition on wrapper:
  Show when: customer_type is "business"

Validation & required fields

Conditionally hidden fields

When a field is hidden by conditional logic:

• It's not validated (even if marked required)
• Its value is not submitted
• It doesn't block form submission

Required when visible

Fields marked as required are only required when visible:

phone_number:
  Required: Yes
  Show when: contact_method is "phone"

Phone is only required when the user selects "phone" contact method.

Best practices

Keep it simple

Test thoroughly

1. Test all possible paths through the form
2. Verify hidden fields don't block submission
3. Check mobile behavior
4. Test with required fields

Performance

Conditions are evaluated on every field change. For forms with many conditions:

• Group related conditions
• Avoid deeply nested logic
• Test on slower devices

Troubleshooting

Field won't show

1. Verify condition field ID is correct
2. Check operator matches field type
3. Test the source field has the expected value
4. Clear browser cache

Field shows briefly then hides

This happens when JavaScript loads. The field's default state should match its expected initial state.

Required field blocking submission

Hidden fields should not block submission. If they do:

1. Check the field is actually hidden (not just invisible CSS)
2. Verify conditional logic is properly configured
3. Check for JavaScript errors