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.
