### Initialize Superform with Basic Form Container (HTML)
Source: https://deltaclan.gitbook.io/superform/getting-started/quick-start
To initialize Superform for a specific form, add the `sf='formName'` attribute to the form's container element. This example shows a `div` wrapping a `form` tag, which will be recognized by Superform for initialization.
```HTML
```
--------------------------------
### HTML Example for Dynamic Form Prefilling
Source: https://deltaclan.gitbook.io/superform/global-options/pre-fill-form
Demonstrates how to set up a form container with `sf-prefill-url="true"` for dynamic URL pre-filling, allowing real-time updates and edits. This setup ensures that as users interact with the form, the URL parameters update accordingly.
```HTML
```
--------------------------------
### Retrieve All Superform Instances with JavaScript
Source: https://deltaclan.gitbook.io/superform/js-sdk/intro-to-superform-api
This example demonstrates how to use the `allForms` method to get an array of all Superform instances that have been initialized on the page. It also shows an alternative way to access the `allForms` method directly from the `SuperformAPI` object.
```javascript
// Use this snippet to get started
window.SuperformAPI = window.SuperformAPI || [];
// Subscribe to listen when Superform is ready
window.SuperformAPI.push(({ getForm, allForms }) => {
/**
* In this example, we are fetching all Superform instances
**/
const myAllForms = allForms; // Returns all Superform instances as an array
console.log(myAllForms);
/**
* Another method to fetch all Superform instances
**/
const myAllForms1 = SuperformAPI.allForms; // Returns all Superform instances as an array
console.log(myAllForms1);
});
```
--------------------------------
### HTML Example: Single Sibling Error Detection
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/automatic-error-setup
Demonstrates Superform's automatic error detection where an error message is placed as a direct sibling to an input field. Superform recognizes keywords like 'error' in the class name to link the message.
```HTML
Name is required
```
--------------------------------
### HTML Example: Error Above and Below Input
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/automatic-error-setup
Shows Superform's advanced proximity context, detecting error messages both above (one sibling up) and below (two siblings down) an input field. This highlights flexible error placement without explicit attributes.
```HTML
!!!!! BE CAREFUL !!!!!!!!!
!
Please enter a valid name.
```
--------------------------------
### HTML Example: Linear Superform Navigation
Source: https://deltaclan.gitbook.io/superform/essentials/navigation-overview/direct
Illustrates the use of the `sf-goto` attribute with `next`, `back`, or `prev` values for sequential navigation in a Superform.
```HTML
sf-goto = next | back | prev
```
--------------------------------
### Include Superform JavaScript Library
Source: https://deltaclan.gitbook.io/superform/getting-started/quick-start
Add this script to the section of your Webflow page or HTML file to load the Superform library. The `defer` attribute ensures the script executes after the HTML is parsed, preventing render-blocking.
```HTML
```
--------------------------------
### HTML Example: Two Sibling Errors Detection
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/automatic-error-setup
Illustrates Superform's ability to detect error messages when there are two sibling elements between the input and the error message. The 'error' keyword in the class name facilitates automatic linking.
```HTML
!
Email is required
```
--------------------------------
### HTML Example: Setting Superform Step Animation Easing
Source: https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-ease
Illustrates how to configure the `sf-step-animation-ease` attribute on a Superform container in HTML. This example shows its application alongside `sf-step-animation` and `sf-step-animation-duration` to create a multi-step form with custom animation properties.
```HTML
```
--------------------------------
### Superform Instance: onStepChange(fn) JavaScript Usage Example
Source: https://deltaclan.gitbook.io/superform/js-sdk/superform-instance
JavaScript example demonstrating how to use onStepChange() to control video playback based on the current form step, pausing or playing as the user navigates.
```javascript
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm, allForms }) => {
const myForm = getForm("myForm");
const myVideo = document.getElementById("myVideo");
myForm.onStepChange((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
/**
* Assuming a video element is present on the first step,
* auto-play when the user is on the first step. On step change,
* pause the video.
**/
if (params.stepCount === 0) {
myVideo.play();
} else {
myVideo.pause();
}
});
});
```
--------------------------------
### Superform Instance: beforeStepChange(fn) JavaScript Usage Example
Source: https://deltaclan.gitbook.io/superform/js-sdk/superform-instance
JavaScript example demonstrating how to use beforeStepChange() to log form parameters and send custom analytics events before a form step transition.
```javascript
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm, allForms }) => {
const myForm = getForm("myForm");
myForm.beforeStepChange((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
// Sending custom event for analytics
gtag("event", "step_event", {
"step_index": params.stepCount,
"progress": params.progress
});
});
});
```
--------------------------------
### Define Form Steps with `sf-step` Attribute (HTML)
Source: https://deltaclan.gitbook.io/superform/getting-started/quick-start
Use the `sf-step` attribute on `div` elements to define individual steps within a Superform. Each step should have a unique name. This enables multi-step functionality, validation, and reactivity, even for single-step forms.
```HTML
```
--------------------------------
### HTML Example: Superform Teleport by Number of Steps
Source: https://deltaclan.gitbook.io/superform/essentials/navigation-overview/direct
Demonstrates using the `sf-goto` attribute with numerical values (`+N` or `-N`) to skip forward or backward a specified number of steps in a Superform.
```HTML
sf-goto = +1 | -1 | +5 | -3 | +10 and so on..
```
--------------------------------
### Superform Instance: getFormData() JavaScript Usage Example
Source: https://deltaclan.gitbook.io/superform/js-sdk/superform-instance
Full JavaScript example demonstrating how to retrieve and log form data using getFormData() within the Superform API context.
```javascript
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm, allForms }) => {
const myForm = getForm("myForm");
const formData = myForm.getFormData(); // Returns form data as an object
console.log(formData); // {email: "name@example.com", ...}
});
```
--------------------------------
### Manually Initialize Superform Instance with JavaScript
Source: https://deltaclan.gitbook.io/superform/js-sdk/intro-to-superform-api
This example illustrates how to manually create a new Superform instance using the Superform class constructor. It's particularly useful for integrating Superform into environments where automatic initialization via the 'sf' attribute is not desired, such as in Wized projects.
```javascript
// Use this snippet to get started
window.SuperformAPI = window.SuperformAPI || [];
// Subscribe to listen when Superform is ready
window.SuperformAPI.push(({ getForm, allForms }) => {
/**
* In this example, we are initializing Superform for the #myForm container
**/
const myForm = new Superform("#myForm");
console.log(myForm);
});
```
--------------------------------
### Control Element Visibility Based on Score Threshold
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation
This Superform example shows how to dynamically control the visibility of a div element. The 'Special reward unlocked for Ross!' message will only be displayed if the score variable '$v.ross' is greater than 5.
```HTML
Special reward unlocked for Ross!
```
--------------------------------
### Superform Friends Quiz HTML Example
Source: https://deltaclan.gitbook.io/superform/essentials/variables/scoring-variables-usdv
This HTML example demonstrates how to create a simple quiz using Superform's scoring variables. It shows how to initialize scoring variables (sf-score), calculate scores based on radio button selections (sf-score-calc), and display real-time scores and the winner using reactivity (sf-react). The example uses ross and monica as scoring variables.
```html
Final Winner:
```
--------------------------------
### Mount Superform to a form container using HTML
Source: https://deltaclan.gitbook.io/superform/essentials/form-container
This HTML example shows how to mount the Superform library to a specific form by wrapping it in a `div` element with the `sf` attribute. The `sf` attribute's value, such as 'myForm', acts as a unique identifier for the form, enabling Superform's features like validation, reactivity, and multi-step support. This setup also allows programmatic access to the form using the `getForm()` function, and multiple Superform instances can exist on a single page.
```HTML
```
--------------------------------
### 1. Step Tabs HTML Example
Source: https://deltaclan.gitbook.io/superform/essentials/variables/step-index-usds
This HTML example demonstrates creating interactive step tabs and corresponding form content using Superform. It utilizes `sf-react` to dynamically apply an 'is-active' class to tabs based on the `$s` (step index) variable, and `sf-step` to define content sections for each step, enabling multi-step form navigation.
```HTML
Step 1
Step 2
Step 3
Step 1 Content
Step 2 Content
Step 3 Content
```
--------------------------------
### Implement Dynamic Score Calculation with sf-score-calc (HTML)
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation
Illustrates how to use the sf-score-calc attribute on radio buttons to dynamically update scores. When a radio button is selected, it adds 1 to the corresponding score variable ('ross' or 'monica'), demonstrating real-time score tracking.
```HTML
```
--------------------------------
### Toggle Class Based on Score Comparison
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation
This Superform example demonstrates how to dynamically add or remove the 'is-disabled' class to a button based on a comparison between two score variables, '$v.ross' and '$v.monica'. The button will be disabled if Ross's score is less than or equal to Monica's.
```HTML
```
--------------------------------
### HTML Example for Resetting Superform Before Submission
Source: https://deltaclan.gitbook.io/superform/essentials/reset
Shows how to use a native HTML input of type 'reset' in conjunction with the 'sf-goto' attribute to simulate a reset within the normal form flow, allowing users to clear current data and return to a specified step.
```HTML
```
--------------------------------
### Initialize Superform Score Variables (HTML)
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation
Demonstrates how to initialize scoring variables 'ross' and 'monica' on a Superform container using the sf-score attribute. This prepares the form to track and manage dynamic numeric values.
```HTML
```
--------------------------------
### Superform onFormSubmit Callback Usage Example
Source: https://deltaclan.gitbook.io/superform/js-sdk/superform-instance
Demonstrates how to use the `onFormSubmit` callback function to access form data, step information, progress, and scores, and how to integrate with analytics using `gtag`.
```javascript
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm, allForms }) => {
const myForm = getForm("myForm");
const myVideo = document.getElementById("myVideo");
myForm.onFormSubmit((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
// Sending custom event for analytics
gtag("event", "lead_capture", {
"interest": params.data.interest,
"rating": params.scores.rating
});
});
});
```
--------------------------------
### Superform sf-score-calc Attribute Methods (APIDOC)
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation
Documents the sf-score-calc attribute used on input elements to define dynamic score calculations. It lists the available methods (add, minus, multiply, divide) and their required parameters for conditional score manipulation.
```APIDOC
`add(condition, variable, value)`: Adds value to variable if condition is `true`.
`minus(condition, variable, value)`: Subtracts value from variable if condition is `true`.
`multiply(condition, variable, value)`: Multiplies variable by value if condition is `true`.
`divide(condition, variable, value)`: Divides variable by value if condition is `true`.
```
--------------------------------
### HTML Example for checkbox() Validation
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/validation/checkbox
This HTML snippet demonstrates how to apply the `checkbox()` validation to a checkbox group using `sf-checkbox-group` and `sf-validation` attributes. It ensures that between 2 and 4 checkboxes are selected from the group, providing a practical example of its implementation.
```html
```
--------------------------------
### Superform registerNavigationHook Usage Example
Source: https://deltaclan.gitbook.io/superform/js-sdk/superform-instance
Illustrates how to register a navigation hook to implement conditional navigation based on form data, returning different step names depending on the `bookingType`.
```javascript
// Wait for Superform to be ready before registering hooks
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm }) => {
const myForm = getForm("myForm");
// Register a navigation hook for conditional navigation
myForm.registerNavigationHook("checkNavigation", (params) => {
const { data, stepCount, progress, scores } = params;
// Example condition for navigation
if (data.bookingType === "Business") {
return "business_step";
} else {
return "economy_step";
}
});
});
```
--------------------------------
### Superform `sf-prefill-url` Attribute API Reference
Source: https://deltaclan.gitbook.io/superform/global-options/pre-fill-form
Comprehensive documentation for the `sf-prefill-url` attribute in Superform, detailing its setup, behavior, and interaction with `sf-save-progress`. It outlines two distinct usage options: dynamic data prefilling and static link generation, along with best practices.
```APIDOC
Attribute: sf-prefill-url
Value: true
Location: Form Container
Description: Automatically fills form fields using URL query parameters.
Interaction with sf-save-progress: Local storage data takes precedence unless specific fields are missing, then URL data is used.
Usage Options:
Option A: Dynamic Data Prefilling
Setup: Permanent sf-prefill-url="true"
Behavior: Dynamically manages data via URL parameters; real-time updates and edits. URL parameters update as users input/modify data.
User Interaction: Shared links allow viewing/editing based on latest URL data. Changes saved and reflected in URL for pause/resume.
Ideal For: Collaborative or lengthy forms, multiple sessions, ensuring data integrity and continuity.
Option B: Static Link Generation
Setup: Temporarily activate sf-prefill-url="true" to generate URL, then remove attribute.
Behavior: Captures form's state at link creation. Removing attribute locks data, preventing further changes.
User Interaction: Static snapshot of form data. Recipients see form exactly as it was when link created.
Ideal For: Uniformity, distributing registration forms (e.g., Google Forms "Get Prefilled Link").
Best Practices:
Data Precedence: When combined with sf-save-progress, local storage data takes precedence over URL data, unless specific fields are missing.
Link Stability: For consistent information, use sf-prefill-url initially, then remove it post-link creation to maintain data integrity.
```
--------------------------------
### HTML Example: Superform Teleport to Named Step
Source: https://deltaclan.gitbook.io/superform/essentials/navigation-overview/direct
Shows how to use the `sf-goto` attribute with a specific step name (e.g., `step-name`) to jump directly to a non-linear form section in Superform.
```HTML
sf-goto = step-name
```
--------------------------------
### Superform $v Variable Access Reference (APIDOC)
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation
Explains the $v variable in Superform, which provides access to initialized scoring variables. This reference details how to specifically access individual score variables for dynamic use within form elements.
```APIDOC
`$v.ross` - Accesses the score variable "ross".
`$v.monica` - Accesses the score variable "monica".
```
--------------------------------
### HTML Example for Resetting Superform Data After Submission
Source: https://deltaclan.gitbook.io/superform/essentials/reset
Demonstrates how to use an HTML input of type 'reset' with the 'sf-goto' attribute to return to a specific step (e.g., 'step-1') after a form submission, allowing the user to fill out the form again.
```HTML
Success! If you want to go again, hit "Retry"!
```
--------------------------------
### HTML Superform: Dynamic Branching with Age-Based Logic
Source: https://deltaclan.gitbook.io/superform/essentials/navigation-overview/logic-conditional
This HTML example demonstrates a Superform that implements dynamic navigation based on a user's age input. It uses `sf-logic` to direct users to either an 'adult' or 'minor' step, showcasing conditional routing within a form.
```HTML
```
--------------------------------
### HTML Example: Enable Enter Key Binding for Next Button
Source: https://deltaclan.gitbook.io/superform/accessibility/enter-and-backspace-bindings
This HTML snippet demonstrates how to explicitly enable the Enter key binding (`sf-bind-enter="true"`) on a button. When pressed, the Enter key will trigger the `sf-goto="next"` action, navigating the user to the next step in a form.
```HTML
```
--------------------------------
### HTML Example for Superform words() Validation
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/validation/words
Demonstrates how to apply the `sf-validation="words(MIN_WORDS, MAX_WORDS)"` attribute to a `
Text must be a maximum of 3 words.
```
--------------------------------
### Basic Superform Expression Examples
Source: https://deltaclan.gitbook.io/superform/additional-resources/wtf-is-an-expression
Illustrates fundamental Superform expressions, similar to calculator or spreadsheet formulas, used for logic within form attributes.
```Superform Expressions
2 + 2 // → 4
```
```Superform Expressions
$f.age > 18 // → true
```
```Superform Expressions
$f.price * $f.quantity // → 2 * 18 = 36
```
--------------------------------
### HTML: Global Step Delay for Superform Transitions
Source: https://deltaclan.gitbook.io/superform/global-options/step-delay-controls
This HTML example demonstrates applying a global step delay to a Superform container using `sf-global-step-delay`. The specified delay in milliseconds will be applied to all transitions between steps, ensuring a consistent pacing throughout the form. This helps synchronize with animations and enhances overall user experience.
```HTML
```
--------------------------------
### Display Superform Scores with sf-react and $v (HTML)
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-setup-and-calculation
Shows how to display initialized scoring variables ('ross', 'monica') within a Superform. The sf-react attribute with text($v.variableName) binds score values to elements, enabling dynamic updates.
```HTML
```
--------------------------------
### Highlight Active Step in Multi-step Forms with Superform
Source: https://deltaclan.gitbook.io/superform/additional-resources/wtf-is-an-expression
An advanced example for multi-step forms, demonstrating how to apply a CSS class to an element based on the current step index using `sf-react` and the `class()` function.
```HTML
Step 3
```
--------------------------------
### Simple Class Toggle with sf-react
Source: https://deltaclan.gitbook.io/superform/reactivity/class-toggle
This example demonstrates how to dynamically add or remove a CSS class (`is-subscribed`) based on the state of a checkbox (`$f.subscribe`). It shows basic usage of `sf-react` for conditional styling.
```HTML
Thank you for subscribing!
```
--------------------------------
### Define Radio Group with Navigation in HTML
Source: https://deltaclan.gitbook.io/superform/essentials/radio-groups
This HTML example demonstrates how to create a radio button group using the `name` attribute and apply `sf-goto` to the container for navigation. All radio buttons sharing the same `name` function as a single group, ensuring only one can be selected at a time. The `sf-goto` attribute on the container adds navigation functionality to the entire group.
```HTML
```
--------------------------------
### HTML Example: Superform Score Ranking in a Quiz
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-ranking
This HTML form demonstrates Superform's score tracking and ranking. It uses `sf-score` to define variables and `sf-score-calc` for updates. The `$v._rank[0]` variable dynamically displays the highest-scoring participant.
```html
```
--------------------------------
### Apply Step Animation to Form Container in HTML
Source: https://deltaclan.gitbook.io/superform/global-options/animations/step-animation
This HTML example demonstrates how to apply the `sf-step-animation` attribute to a form container (`div` with `sf` attribute) to define the animation style for transitions between form steps. It shows a basic two-step form structure with a 'slide-top' animation.
```html
```
--------------------------------
### HTML: Display Progress Percentage Using $p Variable
Source: https://deltaclan.gitbook.io/superform/reactivity/update-text
This HTML example shows how to display a dynamic progress percentage. A `` element uses `sf-react="text($p)"` to bind its content directly to the `$p` variable, which typically represents a progress value. This allows for real-time updates of a numerical display.
```HTML
percentage%
```
--------------------------------
### Tab Navigation with Dynamic Class Toggling using $s Variable
Source: https://deltaclan.gitbook.io/superform/reactivity/class-toggle
This example illustrates how to create a tab navigation system where tab elements (`Step 1`, `Step 2`, `Step 3`) dynamically receive an `is-active` class based on the `$s` (step) variable. It shows how `sf-react` can be used for multi-step forms or navigation.
```HTML
Step 1
Step 2
Step 3
Step 1 Content
Step 2 Content
Step 3 Content
```
--------------------------------
### JavaScript Array Sorting for Ranking Explanation
Source: https://deltaclan.gitbook.io/superform/score-tracking/score-ranking
This JavaScript example shows how to define an array, sort it in descending order using `sort((a, b) => b - a)`, and access elements by index. This illustrates the underlying mechanism of Superform's `$v._rank` array.
```javascript
// Define an array
let scores = [85, 92, 75, 98, 88];
// Sort the array in descending order
scores.sort((a, b) => b - a); // [98, 92, 88, 85, 75]
// The .sort() function sorts the array just like $v._rank in Superform
// It updates in real-time to reflect the latest scores
// Access the highest score
console.log(scores[0]); // 98 --> This is equivalent to $v._rank[0] in Superform
// Access the second highest score
console.log(scores[1]); // 92 --> This is equivalent to $v._rank[1] in Superform
```
--------------------------------
### HTML: Manually Binding Error Messages with sf-error
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup
Demonstrates linking an error message container to an input field using the "sf-error" attribute. This is crucial when the error element is not automatically detected or has a custom class, allowing for flexible placement of error messages outside the input's immediate sibling context.
```HTML
Please check your email for verification
Invalid email address
```
--------------------------------
### HTML: Display User Name Dynamically with sf-react
Source: https://deltaclan.gitbook.io/superform/reactivity/update-text
This HTML example demonstrates dynamic text display. It uses an `` for user name input and a `
` tag with `sf-react="text($f.name)"` to show the entered name in real-time. This binds the text content directly to the form's `$f.name` variable.
```HTML
Hello, !
```
--------------------------------
### HTML Example for Superform Step Animation Duration
Source: https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-duration
This HTML snippet demonstrates how to apply the `sf-step-animation-duration` attribute to a form container. It shows a `div` element with `sf` and `sf-step-animation` attributes, along with `sf-step-animation-duration` set to 300 milliseconds, controlling the transition speed between `sf-step` elements.
```HTML
```
--------------------------------
### HTML: Styling Input and Parent Elements with sf-error-class
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup
Illustrates applying CSS classes to an input field and its parent element based on validation state using "sf-error-class". This enables visual feedback like changing background or border colors upon error, enhancing user experience without requiring "sf-error" if the error element is automatically detected by proximity.
```HTML
Username is required
```
--------------------------------
### HTML Setup for Superform Navigation Hook
Source: https://deltaclan.gitbook.io/superform/essentials/navigation-overview/hook
This HTML snippet demonstrates how to integrate a Superform navigation hook into a form. It shows a basic form structure with radio buttons for booking type selection and a button with the "sf-goto" attribute, which points to a JavaScript hook named "checkBookingType".
```HTML
```
--------------------------------
### Define Form Steps with sf-step Attribute in HTML
Source: https://deltaclan.gitbook.io/superform/essentials/step-container
This HTML example demonstrates how to define steps within a Superform using the 'sf-step' attribute on 'div' elements. Each 'div' with 'sf-step' represents a distinct step in a single-step or multi-step form, allowing for navigation and organization of form content.
```HTML
```
--------------------------------
### HTML: Granular Next Step Delay for Individual Superform Steps
Source: https://deltaclan.gitbook.io/superform/global-options/step-delay-controls
This HTML example illustrates setting specific delays for transitions from individual steps using `sf-next-step-delay`. This attribute allows custom pacing for particular steps, useful for content complexity or animations. It provides granular control without affecting the entire form's delay.
```HTML
```
--------------------------------
### HTML: Customizing Errors Outside Proximity with sf-error and sf-error-class
Source: https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup
Shows how to combine "sf-error" for linking error messages and "sf-error-class" for toggling CSS classes when error elements are located outside the input's immediate context. This provides advanced control for dynamic error placement and styling across different parts of a form.
```HTML
Please provide a valid addres
```
--------------------------------
### Initialize Superform API with JavaScript SDK
Source: https://deltaclan.gitbook.io/superform/js-sdk/intro-to-superform-api
This snippet demonstrates the basic initialization of the Superform API. It shows how to subscribe to the API's readiness event, allowing you to interact with Superform functionalities once they are loaded and available.
```javascript
window.SuperformAPI = window.SuperformAPI || [];
// Subscribe to listen when Superform is ready
window.SuperformAPI.push(({ getForm, allForms }) => {
// Start interacting with the Superform API here
});
```
--------------------------------
### Webflow Example for Resetting Superform Data
Source: https://deltaclan.gitbook.io/superform/essentials/reset
Illustrates how to implement a reset button in Webflow by adding the 'sf-reset="true"' attribute to a button element. This button, placed within success or error blocks, clears form data and restarts the form flow.
```HTML
Success! If you want to go again, hit "Retry"!
```
--------------------------------
### HTML Structure for Superform Progress Bar
Source: https://deltaclan.gitbook.io/superform/essentials/progress-bar
This HTML example demonstrates the integration of a progress bar within a Superform. It shows a form container (`sf="myForm"`), a designated progress bar element (`sf-el="progress-bar"`), and multiple form steps. The `sf-el` attribute is crucial for Superform to identify and dynamically update the progress bar's width based on form progression.
```html
```
--------------------------------
### Superform Navigation Hook Naming Conventions and Best Practices
Source: https://deltaclan.gitbook.io/superform/essentials/navigation-overview/hook
This section provides guidelines for configuring the "sf-goto" attribute with navigation hooks, specifically detailing valid and invalid naming conventions. It emphasizes that hook names must follow the "hook(YOUR_HOOK_NAME)" format, should not start with numbers, contain most symbols (except underscores), spaces, or emojis, and that registering a hook with an existing name will override it.
```APIDOC
Hook Naming Conventions:
Do:
- hook(my_hook)
- hook(hookIsAwesome)
- hook(callhook)
- hook(CALLHOOK)
Don't:
- hook(111111) - Do not use numbers as the start of the hook name
- hook($$$-hook) - Do not use symbols, except for underscores
- hook(⚡️) - Do not use emojis
- hook(my hook is great) - Do not use spaces
```
--------------------------------
### Superform HTML: Accessing fields with standard and bracket notation
Source: https://deltaclan.gitbook.io/superform/essentials/variables/form-data-usdf
This HTML example demonstrates best practices for naming form fields in Superform, using 'firstName' and 'userEmail'. It also shows how to access improperly named fields (e.g., containing spaces or symbols) using bracket notation, like "$f['123 lol ive space 😄']", ensuring flexibility in field access.
```HTML
First Name:
Email:
Special Field:
```
--------------------------------
### Superform HTML: Conditional navigation based on age input
Source: https://deltaclan.gitbook.io/superform/essentials/variables/form-data-usdf
This HTML example illustrates how to implement conditional navigation using Superform's "sf-goto" and "sf-logic" attributes. A button navigates to 'step-adult' if the 'age' input is 18 or greater, otherwise it navigates to 'step-minor', enabling dynamic workflow control.
```HTML
```