Buttons

Click click click.

Buttons can be edited on a per-UI state basis. By default, buttons can take the following states, based on what the responder is doing with them:

UI state

Description

default

No user interaction has happened.

disabled

The button is disabled (eg, cannot continue or a choice is disabled).

focused

The user has tabbed or otherwise focused the button.

hover

The user's cursor is over the button.

‚Äč

Note that this will not be seen by mobile responders, as there is not an equivalent to hover on mobile phones.

Certain buttons styles have additional UI states.

Next button

The next button is probably the most important button within the flow. Clicking it will advance the user to the next available step.

If the responder clicks the next button while there are remaining unanswered questions on the current step, they will be scrolled to the first unanswered question, with that question highlighted.

Back button

The back button is optional, but recommended - it gives responders more control in navigating the flow.

Skip button

A skip button will appear if enabled, 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.

Close button

If you enable the close 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 FlowClosed event when this happens, so you can close the Formsort embed in your code.

Select button

The select button styles are used in the Select and Boolean questions, to display choices to the responder.

Since select choices are used in so many different contexts, it is possible to override aspects of select button styling on a per-question basis within the Select question itself.

For styling checkmarks (including radio), refer to the checkmarks section.