Step Container

Adding step for single step, steps for multistep or quiz functionality.

Setup

Attribute: sf-step = stepName

Where: any div element that you want as a step (is required for single-step forms too).

Description: Defines the form's steps and assigns each step a unique name. Allows for navigation between steps.

HTML Example

index.html

<div sf="myForm">
  <form>
    <!-- Step 1 -->
    <div sf-step="step1">
      <!-- Step 1 content goes here -->
    </div>

    <!-- ## OPTIONAL ## -->
    <!-- Step 2 -->
    <div sf-step="step2">
      <!-- Step 2 content goes here -->
    </div>
  </form>
</div>

Webflow Example

VIDEO: Adding names to steps is highly suggested. This way Superform and you can navigate to each step easier.

Dos and Dont's

---

Step names are used to control navigation and can be referenced programmatically or via navigation attributes, enhancing form flow and user experience.

Avoid using only numbers in step names or start with a number!

Do ✅

• step-1

• step2

• step-intro

• last

Don't ❌

• 4

• 3a

---

Use names semantically so other developers can understand your way of thinking.