> For the complete documentation index, see [llms.txt](https://bmg.gitbook.io/form/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bmg.gitbook.io/form/navigation-currently-being-edited.md). # Navigation \[Currently being edited] 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. {% embed url="" %} *** ### Navigation buttons
PREVIOUS — I want this [Element] to become a prev button 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 = ``` sf ``` \[If element outside the form block] Name = ``` 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] ![](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)
NEXT — I want this [Element] to become a next button 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 = ``` sf ``` \[If element outside the form block] Name = ``` sf-Your_Instance_Name ``` Value = ``` next ``` \--- \--- \[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)
SUBMIT — I want this [Element] to become a submit button 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 = ``` sf ``` Value = ``` submit ``` \--- ![](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)
TO — I want this [Element] to become a to button 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 ->
*** ### Progress indicators
PROGRESS BAR — I want this [Element] to become a progress bar x & y axis are adjustable.
INDICATOR — I want this [element] to display numerical form progress information
CURRENT & COMPLETED — I want this [element] to receive a progress-based combo class This behaviour is described in further detail -> [here](/form/events-+-combo-classes.md#styling-elements-based-on-the-current-slide) <- and -> [here](/form/events-+-combo-classes.md#styling-elements-based-on-already-completed-slides) <-.
***