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.
{
"sf": "next"
}
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
{
"sf-Form Name": "next"
}
Previous Attribute
This attribute defines a button with which your users can return to their previous step.
{
"sf": "prev"
}
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.
{
"sf": "submit"
}
No Button Attribute
This attribute helps you to bypass the assumption that StudioForm's native Webflow buttons are next buttons.
{
"sf": "no-button"
}
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"
}
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"
}
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"
}