Logic / Conditional

Conditional navigation — based on logic.

Enhance your forms with dynamic branching based on user input using Superform's logic-based navigation attributes. This guide will walk you through the necessary steps to set up and use these powerful features.

Setup

To utilize logic-based navigation, the following attributes are essential:

• sf-goto

• sf-logic

• sf-logic-goto

• sf-logic-fallback

These attributes must be used together to enable dynamic navigation within your form.

Attributes and Usage

1. sf-goto

Purpose: Initiates the navigation logic.

Value: logic()

2. sf-logic

Purpose: Defines the condition for the navigation.

Value: JavaScript expression or step data variable (e.g., $f.age > 18).

3. sf-logic-goto

Purpose: Specifies the step to navigate to if the logic condition is met.

Value: Step name (e.g., step-adult).

4. sf-logic-fallback

Purpose: Specifies the fallback step if the logic condition is not met.

Value: Step name (e.g., step-minor).

Where to Use

• Navigation elements

• Radio buttons or radio button groups

• Checkboxes or checkbox groups

Overview

• Dynamic Branching: Define navigation paths based on user inputs and form data.

• Form Variables: utilize $s (step index), $v (variables), $f (form data), and $p (progress percentage) for condition checks.

• Fallbacks: Use sf-logic-fallback to define fallback steps if conditions are not met.

[Diagram] Outline of the flow we are going to create.

HTML Example

index.html

<!-- Form Container -->
<form sf="myForm">
    <!-- Step 1: Age Input -->
    <div sf-step="step-1">
        <label for="age">Enter your age:</label>
        <input type="number" name="age" id="age" required>
        <button sf-goto="logic()" sf-logic="$f.age >= 18" sf-logic-goto="step-adult" sf-logic-fallback="step-minor">Next</button>
    </div>

    <!-- Step: Minor -->
    <div sf-step="step-minor">
        <p>You are under 18 years old.</p>
        <button sf-goto="step-1">Go Back</button>
    </div>

    <!-- Step: Adult -->
    <div sf-step="step-adult">
        <p>You are 18 or older.</p>
        <button type="submit">Submit</button>
    </div>
</form>

Let's isolate the navigation element that determines the logic for better understanding:

index.html

<button sf-goto="logic()"
        sf-logic="$f.age >= 18"
        sf-logic-goto="step-adult"
        sf-logic-fallback="step-minor">
    Next
</button>

<!-- 
Initiate logic,
if age is greater or equal than 18,
go to adult step,
otherwise go to minor step
-->

Webflow Example

Multiple Conditions

To handle multiple conditions leading to different steps, utilize sf-logic-1, sf-logic-goto-1, and subsequent numbered attributes (sf-logic-2, sf-logic-goto-2, etc.).

⚠️ Up to 5 different logic paths.

Each pair (sf-logic-x and sf-logic-goto-x) allows you to define unique conditions and their corresponding target steps, enabling complex branching logic within your form.

Key Points

• All Attributes Are Required: Ensure that sf-goto, sf-logic, sf-logic-goto, and sf-logic-fallback are all present and correctly set up.

• Conditional Logic: Use JavaScript expressions within sf-logic to evaluate conditions based on user inputs or variables.

• Fallback Navigation: Always provide a fallback step to ensure smooth navigation even when the condition is not met.

• Combine with Reactive Variables: Enhance user experience by combining logic-based navigation with reactive variables to display dynamic content.

• Debugging: Use console logs to debug logic conditions and verify navigation flows.