LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
Powered by GitBook
On this page
  • Next button
  • Skip button
  • Previous button
  • Exit button
  • Restart Button
  • Default buttons

Was this helpful?

  1. Building flows
  2. Styling and themes

Form Buttons

Click click click.

PreviousAssetsNextSelect buttons

Last updated 8 months ago

Was this helpful?

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.

The buttons found on this page cannot be added as to your flow (except the Next and Restart buttons), but rather will exist as a fixture in your flow, provided they are added in .

Like other , these buttons can be styled on a per-UI basis.


Next button

The Next button position can be configured in Layout, and style settings can be found in the Buttons -> Next section of the Theme tab.

Style options

By default, the Next button will only appear when the user has answered all the required questions and needs a way to move forward. 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, "Next" is provided as the button label, 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.

Next button style override


Skip button

Options

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.


Previous button

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

Options

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.


Exit button

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.

    • The parent window will receive the FlowClosed event when this happens, so you can close the Formsort embed in your code.

Options

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.


Restart Button

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.

Default buttons

The default button styles will be applied to any buttons not found in the above listed.

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

If you've added your 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 . 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.

If Formsort and you need a way to allow users to close without abandoning the page entirely.

๐Ÿ—๏ธ
Next
Next button as a component
embedding
Content
Layout
Assets
optional
Buttons added to the flow Layout. You don't need to copy this pattern.