Cheatsheet

List of essential attributes and variables.

Summary

↳ Essential attributes

↳ Variables

Essential attributes

Attribute

Options

Description

sf

Any valid form name

Mounts the Superform library to a specific form in Webflow. Supports multiple Superforms on a page. .

sf-step

Any valid step name

Defines individual steps within the form. .

sf-goto

next, back, prev, +1, -1, step-name, logic(), hook(hookName)

Directs navigation to specified steps or based on custom logic or hooks. .

sf-force-goto

true

Ability to use sf-goto outside of form steps. .

sf-logic

JavaScript Logic

Evaluates JavaScript expressions to determine navigation paths based on form data or conditions. Supports multiple conditions by using suffixes (e.g., sf-logic-1, sf-logic-2). .

sf-logic-goto

step-name

Specifies the step to navigate to if the associated sf-logic condition is true. Supports corresponding multiple rules with

suffixes (e.g., sf-logic-goto-1, sf-logic-goto-2). .

sf-logic-fallback

step-name

Defines a fallback step if none of the sf-logic conditions are met. .

sf-reset

true

Resets the form's data, progress and takes the user back to the first step. .

sf-checkbox-group

group-name

Groups together a set of checkboxes. .

sf-el

progress-bar

Tags a form element that will be used as a native progress bar. .

Variables

Variable

Description

Usage

$f

Represents the form data values within Superform

$f.fieldName

$s

Reveals current step index

$p

Tracks the progress percentage (%)

$v

Scoring variable

$v.variableName

$v._rank

Automatically ranks scoring variables based on their values in descending order

$v._rank[number]

Last updated 4 months ago