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
  • Initialization
  • Attribute Configuration

Was this helpful?

  1. Essentials
  2. Navigation - Overview

Hook

Navigation hooks — connect JavaScript logic to determine next steps.

Last updated 9 months ago

Was this helpful?

Setup

Attribute: sf-goto = hook(HOOK_NAME)

Where: Navigation elements, radio buttons, or radio button groups, checkboxes, or checkbox groups.

Description: Determine the next move with JavaScript logic.


Initialization

  1. Add the sf-goto="hook(HOOK_NAME)" attribute to your navigation element, such as the next button.

  2. Then, register the hook using the . See the example below.

index.html
<!-- Form Container -->
<form sf="myForm">
    <!-- Step 1: Booking Type Selection -->
    <div sf-step="step-1">
        <p>Select your booking type:</p>
        <input type="radio" name="bookingType" value="Business"> Business<br>
        <input type="radio" name="bookingType" value="Economy"> Economy<br>
        <button sf-goto="hook(checkBookingType)">Next</button>
    </div>
    <!-- Step: Business -->
    <!-- Step: Economy -->
</form>

index.js
// Wait until Superform is ready
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm, allForms }) => {
    // Assuming you already configured Superform with a name
    const myForm = getForm("myForm");

    myForm.registerNavigationHook("checkBookingType", (params) => {
        console.log(params.data); // Returns form data
        console.log(params.stepCount); // Returns current step index
        console.log(params.progress); // Returns current progress percentage
        console.log(params.scores); // Returns scores object

        /**
         * Here I'm checking what booking type the user has selected.
         * Based on that, returning the next step details.
         **/
        if (params.data.bookingType === "Business") {
            return "business_step";
        } else {
            return "economy_step";
        }
    });
});

Pro Tip

  • Navigation hooks also support async returns, meaning you can return a promise that resolves to a string or number.

  • You can also chain hooks, meaning a hook can return a new hook instruction. For example, instead of returning a step name or step index, you can return hook(NEXT_HOOK).


Attribute Configuration

Configuring navigation does not require any extra attributes. Just ensure the attribute key is sf-goto and the value is hook(HOOK_NAME). Here are some instructions to keep in mind:

  • The hook should follow the format hook(YOUR_HOOK_NAME).

  • Do not register multiple hooks with the same name. The default nature of hook registration is to override.

  • Hook names should not contain any spaces or symbols.

Here are some dos and don'ts:

Dos and Don'ts


Do ✅

  • hook(my_hook)

  • hook(hookIsAwesome)

  • hook(callhook)

  • hook(CALLHOOK)

Don't ❌

  • hook(111111), don't use numbers as the start of the hook name

  • hook($$$-hook), don't use symbols, except for underscores

  • hook(⚡️), don't use emojis

  • hook(my hook is great), don't use spaces

→ Read more about the registerNavigationHook method .

🫀
Superform API
here