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
  • Summary
  • Methods Overview

Was this helpful?

  1. Essentials

Navigation - Overview

Step navigation and teleport β€” powerful & flexible.

Last updated 9 months ago

Was this helpful?

Summary

↳ Direct Navigation

↳ Logic-Based Navigation

↳ Hooks Navigation

↳ add-on Forced Navigation

Attention!

Please read carefully the instructions below, as the powerful sf-goto can be used in a magnitude of cases with various setups. We are on track to release many examples and videos to showcase every possible combination.

new add-on : ability to place sf-goto outside of form steps!


Methods Overview

Superform’s navigation capabilities are versatile, designed to accommodate a wide range of form setups. Explore the distinct features of each method below.

Direct Navigation

Logic-Based Navigation

Hooks Navigation

Forced Navigation

new add-on

sf-force-goto to enable navigation controls outside form steps. Use the attribute in conjunction with sf-goto. This combination allows the external elements to navigate through form steps seamlessly.

⚠️ Works in conjuction with your normal sf-goto.

⚠️ Note that keyboard navigation is not supported for elements using sf-force-goto.

Step Validation Before navigating to the specified step, sf-goto validates the current step to ensure all required inputs are completed.

Flexible Navigation The interplay between sf-goto, sf-logic, and sf-logic-goto supports both straightforward and dynamic navigation, ensuring forms can handle everything from simple step transitions to complex branching logic.

sf-goto can be applied to navigation elements, allowing for navigation between form steps, including next , back , +1 , -1 , or specific steps by name (step-name) for step teleport. This provides flexible navigation options. You can teleport by +X number or just assigning the step-name as a value. β†’ How to:

sf-goto=logic() navigation combines the sf-logic and sf-logic-goto attributes, allowing for dynamic branching based on logic conditions. If a logic condition is met, navigation proceeds to the step specified by sf-logic-goto. Otherwise, a fallback step can be defined by sf-logic-fallback. β†’ How to:

sf-goto=hook(hookName) can trigger a specific hook registered in the code by specifying hook name. This provides a way to integrate programmatic navigation actions, allowing for customized navigation flows. β†’ How to:

πŸ«€
Direct Navigation
Hooks Navigation
Forced Navigation
Logic / Conditional Navigation