Create a Multi-Page form
This step-by-step tutorial will help you create a form with multiple pages.
- Add Multiple Pages to a form
- Configure Page Visibility
- Configure Page Navigation
- Switch Between Pages
- Page Navigation UI
- Configure Special Pages
- Start Page
- Complete Page
- Preview Page
- Render the form
Add Multiple Pages to a form
A page is a container for other form elements (related objects and questions). Pages cannot be nested into each other. Every form should have at least one visible page.
To configure pages, define the pages array in the form model. Each object in this array configures a single Page. Within the object, specify the elements array to configure the page's questions and related objects.
The following model defines a four-page form that contains the Radiogroup, Comment, and Rating question types. The pages are shown in order. The next step is to implement logic that hides specific pages based on the "satisfaction-score" question value.
const formJson = {
pages: [{
elements: [{
name: "satisfaction-score",
title: "How would you describe your experience with our product?",
type: "radiogroup",
choices: [
{ value: 5, text: "Fully satisfying" },
{ value: 4, text: "Generally satisfying" },
{ value: 3, text: "Neutral" },
{ value: 2, text: "Rather unsatisfying" },
{ value: 1, text: "Not satisfying at all" }
],
isRequired: true
}]
}, {
elements: [{
name: "what-would-make-you-more-satisfied",
title: "What can we do to make your experience more satisfying?",
type: "comment",
}, {
name: "nps-score",
title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
type: "rating",
rateMin: 0,
rateMax: 10
}],
}, {
elements: [{
name: "how-can-we-improve",
title: "In your opinion, how could we improve our product?",
type: "comment"
}],
}, {
elements: [{
name: "disappointing-experience",
title: "Please let us know why you had such a disappointing experience with our product",
type: "comment"
}],
}]
};
Configure Page Visibility
You can use the following properties to control page visibility:
- visible A Boolean value that specifies whether the page is visible.
- visibleIf A Boolean expression used to calculate the visible property value. If the expression evaluates to true, the page is visible; if it evaluates to false, the page is hidden. The expression is evaluated for the first time when the form begins, and then re-evaluated again each time any of the question values change.
The visible and visibleIf properties are supported by pages, but you can also set these properties for nested related objects and questions. If a page is hidden or all related objects and questions on it are hidden, the form skips this page automatically.
In the following code, the visibleIf property is set to a Boolean expression that specifies the visibility of pages and questions based on the "satisfaction-score" question value:
const formJson = {
pages: [{
elements: [{
name: "satisfaction-score",
// ...
}]
}, {
elements: [{
name: "what-would-make-you-more-satisfied",
// ...
visibleIf: "{satisfaction-score} = 4"
}, {
name: "nps-score",
// ...
}],
visibleIf: "{satisfaction-score} >= 4"
}, {
elements: [{
name: "how-can-we-improve",
// ...
}],
visibleIf: "{satisfaction-score} = 3"
}, {
elements: [{
name: "disappointing-experience",
// ...
}],
visibleIf: "{satisfaction-score} =< 2"
}],
};
If you need to access an array of visible pages, use the formModel's visiblePages property. If you only need the number of visible pages, use the visiblePageCount property. Both properties update dynamically as the respondent progresses in the form.
Respondents can click the Next, Previous, and Complete buttons to navigate form pages. To change button captions, you can specify the formModel's pageNextText, pagePrevText, and completeText properties.
const formJson = {
pageNextText: "Forward",
pagePrevText: "Back",
completeText: "Submit"
};
If you want to hide the buttons, set the showNavigationButtons property to "none".
If you only want to hide the Previous button, disable the showPrevButton property. Note that respondents will still be able to edit their previous answers on the preview page if you add it to your form.
const formJson = {
showPrevButton: false,
};
You can also indicate form progress on a progress bar. To display and position it on the page, set the showProgressBar property to "top", "bottom", or "both".
const formJson = {
showProgressBar: "top"
};
The example in this tutorial uses only the pageNextText, completeText, and showPrevButton properties:
Configure Special Pages
Start Page
A start page usually shows an introduction to your form. It does not affect the form progress, and users cannot return to it once they start the form. If you want to add a start page to your form, configure the page in the first object of the pages array. In the code below, the start page contains HTML markup:
const formJson = {
pages: [{
elements: [{
type: "html",
html: "<h2>In this form, we will ask you a couple questions about your impressions of our product.</h2>"
}]
},
// ...
// Other pages are configured here
// ...
],
};
Enable the firstPageIsStarted property to let the form know that the first page is a start page and add a Start button to the page markup. You can use the startformText property to change the button caption:
const formJson = {
firstPageIsStarted: true,
startformText: "Start the form",
};
Complete Page
A complete page displays a "Thank you" message when the form ends. If you want to specify a custom message, use the following properties:
- completedHtml Custom HTML content displayed on the complete page.
const formJson = {
completedHtml: "Thank you for your feedback!",
};
- completedHtmlOnCondition An array that allows you to specify different complete page content based on conditions. Each object is this array should contain a Boolean expression and HTML markup that applies when this expression evaluates to true:
const formJson = {
completedHtmlOnCondition: [{
expression: "{some_field} > 10",
html: "Custom markup to show when some_field is greater than 10"
}, {
expression: "{some_field} < 10",
html: "Custom markup to show when some_field is less than 10"
},
// ...
]
};
- When none of the expressions evaluate to true, the complete page displays the HTML markup from the completedHtml property.
If your form should not display a complete page, disable the showCompletedPage property.
Preview Page
A preview page allows respondents to preview and correct their answers before the form is completed. The preview page displays all visible form pages as related objects. Each panel has an Edit button that sends the respondent back to the corresponding page.
To enable the preview page, specify whether it should display all visible questions or only those that have answers. Set the showPreviewBeforeComplete property to "showAllQuestions" or "showAnsweredQuestions":
const formJson = {
showPreviewBeforeComplete: "showAnsweredQuestions"
};
When the preview page is enabled, the last page in the form displays a Preview button instead of a Complete button. Set the previewText property if you want to change the Preview button caption:
const formJson = {
previewText: "Preview answers"
};