Hook

Navigation hooks — connect JavaScript logic to determine next steps.

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 Superform API. 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 here.