---
description: >-
  This page provides an overview of the "Previous", "Next", "Submit" and "To"
  buttons and how the respective progress of a form is displayed by default.
---

# Navigation \[Currently being edited]



{% embed url="https://www.loom.com/share/505bed1b827d48f4956d9d5e0a854120?sid=68095a6a-8f3f-4a99-acec-8d038395aaaa" %}



***



### Navigation buttons



<details>

<summary>PREVIOUS — I want this [Element] to become a prev button</summary>

Description:

The "prev" attribute can be set to any element within the form block that is to receive the previous navigation function.

If you want to achieve the previous navigation functionality with elements outside the form block, append the name of your Studioforms instance to the "name" value.



\---



Name =&#x20;

```
sf
```

\[If element outside the form block] Name =&#x20;

```
sf-Your_Instance_Name
```



Value =

```
prev
```



\---



![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FjP2NiaTMjAkvK5VBxdcj%2FScreenshot%202023-12-12%20at%2006.53.20.png?alt=media\&token=474c447f-9ac1-4664-b7e2-057bec2d1b24)

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FaVbWX7ocpK5TsV4Cbbq3%2FScreenshot%202023-12-12%20at%2006.54.01.png?alt=media\&token=c9af2dde-b2e8-4794-8168-848fb7710831)



\---



\[If element outside the form block]

<img src="https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FkhV8UeEagsz0F4Lseux0%2FScreenshot%202023-12-12%20at%2007.01.00.png?alt=media&#x26;token=412d9ea6-be09-47e3-9a25-d27053772c87" alt="" data-size="original">

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FFhZXZWuvkidm0RBSdQ7T%2FScreenshot%202023-12-12%20at%2007.02.47.png?alt=media\&token=42550e3c-56cd-42ac-b565-bb901f90dd0c)

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FZFkTxIxFbXyuNTG1ckXL%2FScreenshot%202023-12-12%20at%2007.02.21.png?alt=media\&token=164d380b-a6fd-4939-918f-e0cdf20d5a67)

</details>

<details>

<summary>NEXT — I want this [Element] to become a next button</summary>

Description:

The "next" attribute can be set to any element within the form block that is to receive the next navigation function. (Note that standard webflow buttons receive this function by default. If there is no next slide, the next buttons will trigger the submit function. If you want to disable the button functionality, set name to "sf" and value to "no-button")

If you want to achieve the next navigation functionality with elements outside the form block, append the name of your Studioforms instance to the "name" value.



\---



Name =&#x20;

```
sf
```

\[If element outside the form block] Name =&#x20;

```
sf-Your_Instance_Name
```



Value =

```
next
```



\---



<img src="https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FZCIlN2lXSsHcClU3ZOSF%2FScreenshot%202023-12-12%20at%2008.06.48.png?alt=media&#x26;token=2d5c73bb-2710-46f9-8997-2b8c6c76c7d9" alt="" data-size="original">

<img src="https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FelJZJZqfyZfzJ0X61y7O%2FScreenshot%202023-12-12%20at%2008.08.11.png?alt=media&#x26;token=a3173222-421c-4689-b5b6-7b59d83c848e" alt="" data-size="original">



\---



\[If element outside the form block]

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FNBanUG6frYHeLkxJQuC5%2FScreenshot%202023-12-12%20at%2008.10.00.png?alt=media\&token=1e2ce865-c4a9-407f-9683-b17402d0680a)

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FFhZXZWuvkidm0RBSdQ7T%2FScreenshot%202023-12-12%20at%2007.02.47.png?alt=media\&token=42550e3c-56cd-42ac-b565-bb901f90dd0c)

<img src="https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FARcRGa3PfkEzyAuJBEcy%2FScreenshot%202023-12-12%20at%2008.10.38.png?alt=media&#x26;token=fc51da12-60e1-473b-90c1-b5010f9bb115" alt="" data-size="original">

</details>

<details>

<summary>SUBMIT — I want this [Element] to become a submit button</summary>

Description:

The "submit" attribute can be set to any element within the form block that is to receive the submit navigation functionality. (Note that standard Webflow submit buttons are automatically converted and therefore receive this function by default. )

If you want to deactivate the functionality of the button, set name to "sf" and value to "no-button".



\---



Name =&#x20;

```
sf
```



Value =

```
submit
```



\---



<img src="https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FgKNaEmcoSqlVUAv8PC1I%2FScreenshot%202023-12-12%20at%2008.56.48.png?alt=media&#x26;token=0c52f4f3-fcc7-4264-8523-4c9ad177a0d8" alt="" data-size="original">

![](https://3218275886-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7CGjyq0fHnWhMI656FIJ%2Fuploads%2FWE67ITJn4dzBrpBwseoP%2FScreenshot%202023-12-12%20at%2008.57.47.png?alt=media\&token=01926950-1683-4ef1-b3ad-5bf88414a5ed)

</details>

<details>

<summary>TO — I want this [Element] to become a to button</summary>

The TO elements are currently being revised to merge them with the old conditional logic into a new to-based logic (mainly for greater ease of use).

In the meantime, if you have specific navigation needs, check out the .to("Slide identifier") in the Wized + StudioForm section -> https://bmg.gitbook.io/form/wized-+-studioform-not-finished-yet

</details>



***



### Progress indicators



<details>

<summary>PROGRESS BAR — I want this [Element] to become a progress bar</summary>

x & y axis are adjustable.

</details>

<details>

<summary>INDICATOR — I want this [element] to display numerical form progress information</summary>



</details>

<details>

<summary>CURRENT &#x26; COMPLETED — I want this [element] to receive a progress-based combo class</summary>



This behaviour is described in further detail -> [here](../events-+-combo-classes#styling-elements-based-on-the-current-slide) <- and -> [here](../events-+-combo-classes#styling-elements-based-on-already-completed-slides) <-.

</details>



***

