This example uses a simple two-page form to enter data for a simulated email message.

Start the example here.

Although a two-page form does not make sense for three fields when run from a desktop browser, this demonstrates how the Flow makes it easy to keep track of the user's "position" in the application flow. Just imagine you're working on a tiny mobile device for a minute.

We won't use Cocoon Forms here, but simply bind a JavaScript object to our form manually.

Notice how little code is needed to keep state while the user can freely move between the pages without losing data.

## The sitemap

There's nothing new in the sitemap, our use of variables allows the exact same sitemap to be reused for both our Flow examples.

The only specific thing is the importing of the multi-page.js Flowscript, but this was already present for the previous example:

## Flowscript code

Here's the Flowscript which drives the multi-page form example:

It is not more complicated than the previous example, but slightly longer due to the (boring) copying of request parameters into the message object. This boring part is where Cocoon Forms will come into play, by making it easier to bind data to values edited in a form.

By copying values into the message object after each submission, we allow the user to freely move between pages without losing data.

## JXTemplate view

Nothing special in the form view, this is very similar to the previous example.

We're only using two submit buttons, one to move between pages and one to actually submit the data and go to the result page.

This is page 1. The page 2 is similar but shows the text field instead of the fields present on page 1.