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

HTML Example
<!-- 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:
<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

Last updated
Was this helpful?