How can i transfer data between two pages?

Basically you need to store the data that the user will input in the form in a persistent storage in the first task and retrieve them in the second task. The easiest solution for storage is to use Business Data Management (BDM) feature of Bonita. And to retrieve data you will use form variables initialize by calling Bonita Engine REST API.

Here is a description of the data flow from the user web browser to the business database schema managed by Bonita BDM:

1. When user input some data in a form widget the value is saved in the form variable (i.e. a JavaScript object) associated with the Value property of the widget.
2. The submit button of the form is configured (Action property of the widget button) to either start a new process instance or submit a task. When clicked it will call the Bonita Engine API giving the order to start the process or execute the task and, in the same call, data entered by the user are sent. Data to send are defined by the Data sent on click property of the widget button. Value of Data sent on click is usually a form variable. It can be directly a variable associated with one or several form widgets (as variable are JavaScript objects they can have multiple attributes and each attribute value can be updated by a different widget) or a JavaScript variable that is used to aggregate together values of different form variables. The form variable is convert into some JSON to be sent in the HTTP request to Bonita Engine API.
3. Data received by the Engine will be matched against the process or step contract. They should exactly match. For example the following JSON: {"contractInput": {"attributeA": 123, "attributeB": "test"}} should be used with a contract input named "contractInput" declared with a type "complex". This "complex" contract input must have two attributes: one named "attributeA" of type integer (or long, or float...) and one named "attributeB" of type "text".
4. Next the contract information can be used to set the default value of a business variable declared in the process definition. Usually the first step is to declare the business variable and then generate the form or step contract out of it: this will automatically generate the Groovy script that create the new business variable object based on contract inputs. Then you usually generate a first form based on the contract definition.
5. Setting the default value of a business variable actually automatically trigger the insertion of the data in the database. Note that contract information can also be used in operations on task (an operation can be used to initialize a business variable or update an existing one), as connectors input data...

Now here is a description of how to display some data in a form like in your second task:

1. Create a new form variable
2. Set the type to "External API" (this will trigger a GET REST API call)
3. Set the name of the form variable, for example: myData
4. Set the API URL to: ../{{context.myBusinessVariable_ref.link}} myBusinessVariable must be exactly the name of the business variable as declared in the process definition. context is a form variable initialize with a REST API call (to /bonita/API/bpm/userTask/{{taskId}}/context) and taskId is also a form variable initialize using an URL parameter named id.
5. Add widgets to your form. For example: an input widget
6. Set the widget value property to: myData.myAttributeName where myData is the name of the form variable and myAttributeName is the name of one of the attribute of the BDM object.

This process of creating a form to display data will become a lot easier in the upcoming Bonita version (7.9.0)