Preview window

See the current state of a flow without deploying.

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.

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?

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 staging or test environment, giving you a more close-to-production experience.

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

If you have configured custom domains, 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.

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.

Last updated