# Step Delay Controls

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](#global-step-delay "mention")

↳ [#next-step-delay](#next-step-delay "mention")

***

## **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](https://deltaclan.gitbook.io/superform/essentials/form-container "mention")

Α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

{% code title="index.html" %}

```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>

```

{% endcode %}

***

## **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](https://deltaclan.gitbook.io/superform/essentials/step-container "mention")

**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](#global-delay "mention").

**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**

{% code title="index.html" %}

```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>

```

{% endcode %}

**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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deltaclan.gitbook.io/superform/global-options/step-delay-controls.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.