Docs
Navigation and Logic
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Navigation Attributes

Navigation attributes in StudioForm streamline user interactions by defining the behavior of form elements like next, previous, and submit buttons. This setup ensures a smooth and efficient form completion process, enhancing both user experience and design control.

Next Attribute

Standard webflow buttons receive the class .w-button. Every button with that class is automatically considered a next button.

Next Attribute

{

   "sf": "next"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
next
default =
|
values =
next
Copy
Copied

Advanced Radio Navigation

Works the same as normal next button, but delivers that basis radio steps; if no next or submit button is existent on a slide, and radios are the only available fields, StudioForm will assume you want to radio buttons; sf-to work with radio buttons as well

Advanced Radio Navigation

{

   "sf-Form Name": "next"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-Form Name
Copy
Copied
Value
next
default =
|
values =
next
Copy
Copied

Previous Attribute

This attribute defines a button with which your users can return to their previous step.

Previous Attribute

{

   "sf": "prev"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
prev
default =
|
values =
prev
Copy
Copied

Submit Attribute

Every next button that want's to continue even though there is no more slide after, will trigger the same behaviour the submit button would.

Submit Attribute

{

   "sf": "submit"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
submit
default =
|
values =
submit
Copy
Copied

No Button Attribute

This attribute helps you to bypass the assumption that StudioForm's native Webflow buttons are next buttons.

No Button Attribute

{

   "sf": "no-button"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
no-button
default =
|
values =
no-button
Copy
Copied

Conditional Form Logic

Conditional form logic allows for a dynamic and responsive user experience by controlling the flow of forms based on user input or predefined rules. This flexibility ensures that forms adapt to different scenarios, guiding users through a customized journey based on their interactions.

Name Your Form Steps

Begin by labeling each step of your form. This helps in organizing the form structure and makes it easy to reference and manage specific sections during the setup and user interaction.

{

   "sf-name": "Form Step Name"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-name
Copy
Copied
Value
Form Step Name
default =
|
values =
Form Step Name
Copy
Copied

Tag Next Buttons

Ensure all navigation buttons are set up to move the user to the next part of the form. This step confirms that each button performs its intended function, maintaining a smooth and logical progression through the form.

{

   "sf": "next"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
next
default =
|
values =
next
Copy
Copied

Set Navigation Paths

Finalize the setup by linking navigation buttons to particular form steps. This setup allows the form to respond dynamically, directing users to different sections based on their inputs or the sequence of the form, creating a seamless and efficient user journey.

{

   "sf-to": "Form Step Name"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-to
Copy
Copied
Value
Form Step Name
default =
|
values =
Form Step Name
Copy
Copied
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.