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. Learn more.
sf-step	Any valid step name	Defines individual steps within the form. Learn more.
sf-goto	next, back, prev, +1, -1, step-name, logic(), hook(hookName)	Directs navigation to specified steps or based on custom logic or hooks. Learn more.
sf-force-goto	true	Ability to use sf-goto outside of form steps. Learn more.
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). Learn more.
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). Learn more.
sf-logic-fallback	step-name	Defines a fallback step if none of the sf-logic conditions are met. Learn more.
sf-reset	true	Resets the form's data, progress and takes the user back to the first step. Learn More.
sf-checkbox-group	group-name	Groups together a set of checkboxes. Learn More.
sf-el	progress-bar	Tags a form element that will be used as a native progress bar. Learn More.

---

Variables

Variable	Description	Usage
$f	Represents the form data values within Superform	$f.fieldName
$s	Reveals current step index	$s
$p	Tracks the progress percentage (%)	$p
$v	Scoring variable	$v.variableName
$v._rank	Automatically ranks scoring variables based on their values in descending order	$v._rank[number]