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
  • Accessing the live preview
  • Navigating in the preview window
  • Setting and viewing answers
  • Fixtures
  • Logging events
  • Advanced settings
  • Host
  • Viewport
  • Environment
  • Show all

Was this helpful?

  1. Building flows
  2. Publishing and versions

Preview window

See the current state of a flow without deploying.

PreviousPublishing and versionsNextDeploying

Last updated 3 years ago

Was this helpful?

Accessing the live preview

The live preview shows changes in content, style, and even integrations in real-time, so that you can see your form take shape as you build.

The preview window is a safe space to try things out and test - unless you change the environment within the advanced settings, the answers are discarded upon reload, and your production data and events will not be sent.

To open the preview window, click LIVE PREVIEW on the top-right of a loaded variant -- it will open in a new window.

Navigating in the preview window

The preview window navigation allows you to do things you cannot do on a real form - normally, you cannot do things like jump forward to an arbitrary step without filling out answers previous to it.

Stuck in the preview window?

Setting and viewing answers

To set answers directly, as well as to access the current values for answers within the form, click SET ANSWERS on the bottom-left of the Live Preview screen.

Fixtures

It's possible to save the current state of answers as a fixture, making the answers available to load within future editing sessions.

Fixtures are useful in long flows with complicated logical progressions, since you can jump into testing a known scenario rather than constantly have to recreate the same set of answers.

Logging events

Clicking Events captured on the bottom-right of the Live Preview window will show the events and payloads that would have been sent to the third-party analytics integrations you have configured for the form.

Advanced settings

Clicking the gear icon at the right side of the preview window will bring up advanced settings.

Host

Viewport

Your users will view your forms on a variety of devices - consequently, it's a good idea to test on various form factors. The built-in viewports allow you to access common device resolutions quickly.

Note that you can also resize the preview itself to see how your layout performs in different-sized containers.

Environment

The preview window normally discards all saved answers, and does not send analytics events, instead logging them to the window. If you would like to instead send data to your real integrations, to test that everything is connected, you can choose one of your environments in which to load the form.

Show all

If show all is checked, questions will always be visible, even if they are conditionally enabled and the dependent condition has not been evaluated. This may be helpful when building flows with lots of inline conditions.

If you are having trouble progressing forward in a flow in the preview window, or if expected behavior like a redirect is not behaving as expected, try starting from the beginning, and filling out all answers along the way, like a responder would. For more involved testing, you might want to publish to a , giving you a more close-to-production experience.

If you have , your flows will be available not only on flow.formsort.com, but any domains that you have set up. The preview window loads using your default domain, but if you would like to change it, you can do so using the host setting. This may be useful for troubleshooting CORS issues with API calls, but generally you shouldn't have to change this.

๐Ÿ—๏ธ
staging or test environment
configured custom domains
Preview window navigation
The fixtures dropdown