Step Delay Controls

Add delay between steps for smoother transitions — global and/or granular.

Superform allows you to control the pacing of your form steps with two key attributes: sf-global-step-delay and sf-next-step-delay. These attributes add delays between step transitions to create a smoother and more polished user experience.

Summary

↳ Global Step Delay

↳ Next Step Delay

---

Global Step Delay

Control step delay globally.

Attribute: sf-global-step-delay

Value: Delay in milliseconds (e.g., 100)

Default: 0 (ms)

Where: Form Container

Αllows you to set a global delay (in milliseconds) between each form step transition to fine-tune the pacing of your form steps. This creates a smoother user experience by adding a slight pause between all steps, enhancing the visual flow of your form.

Use Cases

• Control and Synchronization: Adjust the delay to sync with any step-specific animations, ensuring a polished and seamless flow.

• Enhance User Experience: By adding a slight delay, transitions between steps feel more natural and less abrupt.

HTML example

index.html

<!-- Form Container with Global Step Delay -->
<div sf="myForm" sf-global-step-delay="100">
    <form>
        <div sf-step="step1">
            <!-- Step 1 content -->
            <button sf-goto="next">Next</button>
        </div>
        
        <div sf-step="step2">
            <!-- Step 2 content -->
            <button sf-goto="next">Next</button>
        </div>
        <!-- Additional steps -->
    </form>
</div>

---

Next Step Delay

Granular delay controls for steps.

Attribute: sf-next-step-delay

Value: Delay in milliseconds (e.g., 200)

Default: 0 (ms)

Where: Step Container

Description Allows you to set a delay for the transition from the current step to the next specific step. This is useful for adding custom delays to particular steps without affecting the entire form. Can work in conjuction with #global-delay.

Use Cases

• Custom Delays: Use sf-next-step-delay for specific steps that may require longer transition times due to content complexity or animations.

• Seamless Transitions: Apply to steps with more complex content to ensure a smooth transition.

HTML Example

index.html

<!-- Form Container with Specific Step Delays -->
<div sf="myForm">
    <form>
        <div sf-step="step1" sf-next-step-delay="200">
            <!-- Step 1 content -->
            <button sf-goto="next">Next</button>
        </div>
        <div sf-step="step2" sf-next-step-delay="300">
            <!-- Step 2 content -->
            <button sf-goto="next">Next</button>
        </div>
        <div sf-step="step3">
            <!-- Step 3 content -->
            <button sf-goto="next">Next</button>
        </div>
        <!-- Additional steps -->
    </form>
</div>

Pro Tip Control and synchronize delays to enhance the visual flow and user experience of your forms. By adjusting these delays, you can ensure transitions between steps feel natural, polished, and aligned with any step-specific animations.