Buttons
Click click click.
Buttons as an asset are very useful, and have many different applications in Formsort. Below are the some options provided, as well as some insight on configuring their behavior and design.
Buttons added to the flow Layout. You don't need to copy this pattern.
The Next button is probably the most important button within the flow. Clicking it will advance the user to the next available step.
The Next button position can be configured in Layout, and style settings can be found in the Buttons -> Next section of the Theme tab.
By default, the Next button will only appear when the user has answered all the required questions. You can opt to "Always show next button" by enabling the setting under Behavior, in which case the Next button will show in it's Disabled state until the user is available to proceed.
By default, the button will have "Next" as the copy inside the button, but this can be modified or removed by changing the string inside the Label input.
You can add an Image to your next button, style settings for which can be found at the bottom of the menu under Image style once an image has been added.
If you've added your Next button as a component on a step, the style settings can be overriden in the component's style menu. With the component selected, open the Style menu and disable "Use default select button style".
A skip button will appear if enabled, but only on steps where all questions within the step are optional. Of course, the responder could just click the Next button in this case, but having an explicit skip action may help people understand that their responses are not required on the current step.
By default, the button will have "Skip" as the copy inside the button, but this can be modified or removed by changing the string inside the Label input.
You can add an Image to your skip button, style settings for which can be found at the bottom of the menu under Image style once an image has been added.
The previous button is optional, but recommended - it gives responders more control in navigating the flow.
By default, the button will have "Previous" as the copy inside the button, but this can be modified or removed by changing the string inside the Label input.
You can add an Image to your Previous button, style settings for which can be found at the bottom of the menu under Image style once an image has been added.
If you enable the exit button in the style editor, users will be able to click it to abandon the flow.
There are a few cases where having a close or exit button is helpful:
- If users are accessing your flow directly, but you wish to bring them to your own page if they are abandoning.
- If you set a redirect URL then they will be brought to that URL.
- If embedding Formsort and you need a way to allow users to close without abandoning the page entirely.
- The parent window will receive the
FlowClosedevent when this happens, so you can close the Formsort embed in your code.
By default, the button will have an "X" as the copy inside the button, but this can be modified or removed by changing the string inside the Label input.
You can add an Image to your Exit button, style settings for which can be found at the bottom of the menu under Image style once an image has been added.
If you add a restart button to your flow, the user will be able restart the flow with all their inputs cleared.
By default, the Restart button will have "Restart" as the copy inside the button, but this can be modified or removed by changing the string inside the Label input.
You can add an Image to your Restart button, style settings for which can be found at the bottom of the menu under Image style once an image has been added.
The default button styles will be applied to any buttons not found in the above listed.
Last modified 3mo ago