The problem

You would like to split a forms into multiple parts shown in sequence, as in a wizard. (We intentionally use the word parts instead of pages even if you can for now think of those as equivalent.) You want to do this because you don't want to overwhelm users by showing a large number of fields, or because some part may or may not need to be filled based on previous answers.

The solution

At this point, Form Builder does not handle "page navigation" or "workflow". With Form Builder, you create one form at a time. When the form is filled out, you can send users to another page you created on another system. The data entered by users can also be passed along to that other page, so it can decide what to do next, which may include redirecting users to another form you created with Form Builder. To learn more about this, see the workflow send button. In what follows, we'll assume that what you want to build is more like a wizard than something that requires an external workflow orchestrating multiple forms.

Example

Let's create a registration form with 3 parts:

1. In the first part, we'll ask users about their name and if they need a hotel reservation.
2. In the second part, if they said they need a hotel, we'll ask some hotel-related information.
3. The third part has just a confirmation message.
   

Showing one section at a time

Instead of creating multiple forms, you create one, and put each part of your form in a form section. You then write section visibility rules so only one is visible at a given point in time. But how do we know which section to display? Let's create a first section with one field used to keep track of the visible part:


You never want that section to be shown to users, so set its visibility to false(). Name the field part, so you can refer to its value later as $part, and set its initial value to personal, which identifies the part you want to display first.



Create one section per "part", and for each section decide whether it is visible or not based on the value of $part.

Switching from one section to the next

Now you have sections that show depending on the value of $part. But how do you change $part? How do you implement a Next button that goes to the following section? For this you need a bit of XForms coding. To add or edit the XForms code produced by Form Builder, in the left side-bar, under Advanced, click on Edit Source. Then, just below the </fr:body> add:


Depending on your level of familiarity with XForms, you'll either find this trivial or cryptic. Two parts are interesting in this code:

• The ref attribute on the <fr:button> says that the button itself is only visible if we are not on the confirmation part.
• The ref attribute on the <xforms:setvalue> defines what the new part name is when the button is pressed. In this case it skips the hotel if users said they don't need a hotel reservation.

Including custom buttons

Explicitly providing your own buttons inside an <fr:buttons>, placed inside the <fr:view> just after the </fr:body>, overrides the buttons you configured with oxf.fr.detail.buttons. If you want to include other buttons, you need to include them explicitly inside the <fr:buttons>, before or after your custom <fr:button>, as in:


You can see all the possible buttons you can use in buttons.xsl.

Get the source

To try a full example, create a new form in Form Builder, do Edit Source, and paste the content of the attached file there.