Guides & tutorials

Getting started with the live preview

No items found.
Import this tutorial scenario in your workspace
Table of contents

Take advantage of the live preview screen: a new visual way to know what happens, behind the scenes, when a form is filled and navigated by a user.

In this post, you will learn how to easily test new forms and the changes you have made to existing ones, to check that everything is working properly.

How to access the live preview

To access the live preview page, go to the form editor and open the form you want to test. Then click on the 'Preview' button in the upper right corner to access it.

Testing the form

In the live preview screen, the form will be displayed on the left side and, on the right, a list of actions that have been executed. Here you can test the form by inputting data into it.

Note that to test the full process, you must use an email account that you have access to. For example, if you are going to receive an OTP by email, you will need the temporary code to run the test.

Events and actions displayed

As you interact with the form, the right column will list and show all the events that occur both on the frontend and the backend.

The events you will find in the list are:

  • Form steps. Each time a new step of the form is displayed.
  • Form navigation. Each time the user clicks a ‘Next step’, ‘Previous step’ or ‘Jump to step’ button, makes a payment with Stripe, or uses a Social Login option. Plus if the go forward or previous action is performed by a widget, a custom field, or an external script.
  • Flow executions. All flows and actions that are executed between form steps and after the form submission, and if each execution has completed or failed.
  • Form submission. When the user reaches the end of the form and finally submits it.
  • Redirections. Although redirections are not executed in live preview screens, the moment in which the redirection should take place will appear in the list.
  • Form retrieval. To inform the user that the form has been embedded.

Checking flows executions

As mentioned before, the execution of each of the flows connected to form will appear on the list, with all the actions executed and the status of the execution.

The states that you will find in the executions of the flows are:

  • Completed. The execution of the flow has been successful.
  • Failed. The execution of the flow has failed and must be reviewed.
  • Pending. This is a temporary state that indicates that the flow is still running. It will be updated as soon as the execution is done.

When a flow execution fails, a red icon will appear over the failed action. To see what happened, click on the 'Inspect execution' option. It will take you to the debugger mode, where you can check the error, and the inputs and outputs of the action.

Refreshing the live preview

Once you have fixed the errors, go back to the live preview page and click the 'Refresh' button to try it again.

Are all the executions of the flows successful? Your form is ready to embed. You will find the corresponding buttons in the upper right corner of the live preview page. Need more help? Don’t hesitate to contact us.

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.