Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Setup
  • Attributes and Usage
  • Where to Use
  • Overview

Was this helpful?

  1. Essentials
  2. Navigation - Overview

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 form data.

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

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.

Last updated 9 months ago

Was this helpful?

Form Variables: utilize , , , and for condition checks.

🫀
$s (step index)
$v (variables)
$f (form data)
$p (progress percentage)
[Diagram] Outline of the flow we are going to create.