This article looks at one way to add a "check your answers" page to a form. These pages usually appear as the final page in a multi-page form, but could also be used mid-way through a very long form to divide it into more manageable sections.
This article was written before the new "page mode" functionality was added to forms. For a much easier way to build this type of page, see the Summaries - Check Answers Page tutorial.
Why Bother?
The GDS form design patterns (ie best practice guides) recommend displaying a Check Answers Page (opens new window) immediately before a form is submitted. The page lets the user review their answers, reducing errors and missed information.
Next to each answer is a button or link to go back and change it. The page of the form that needs to be edited loads all of the current answers so the user can change them. Navigating forwards again takes the user back to the check answers page (so they don't have to navigate all the way through the form).
Example
You can try out a check your answers page using the form related to this article. You can also download a copy and import it into your own forms designer.
Detailed Walk-through
The example form has three pages. Pages one and two make up the body of the form, page three is the check your answers page.
Pages One and Two
You can add as many pages to your form as you need. The only parts that need to be edited to work with the check your answers page are the "Next Functions" in the wizard buttons.
In forms with a check your answers page, the "Next" buttons on each page need to do two different things. When someone is first filling out the form the button needs to take them to the next page. However, if they go back to a page from the check your answers page, the button needs to take them directly to the check your answers page.
Here's a "Next Function" that can do that.
The first part of the function takes the user to the default next page. If a variable called "CHECKPAGE" has the value "true", the next button will take the user to the page called "CHECK". The value of the variable is set on the check your answers page (see below).
Check Page
This page has a little more going on. It uses three form helper variable fields to hold some information, and an HTML template field to display the user's answers.
It's actually easier to explain each field starting from the bottom.
Wizard Buttons
The wizard buttons' "Back Mode" is set as "Validate, no actions". This back mode is called "Previous".
The mode validates the page content so that it is available in the form session when a user goes back to another page. Actions are disabled because it doesn't normally make sense to trigger actions when going backwards.
The buttons also have a custom "Back Function".
If the form variable called "BACKPAGE" isn't empty (see below), the back action will take the user to the page named in that variable.
HTML Template
This field displays the answers from the form to the user. You can generate a summary table using the toolbar shortcut.
Alongside each answer in the table the SCRIPTBUTTON Handlebars helper can be used to add a button.
{{SCRIPTBUTTON name="edit1" label="Change" onClick="helper.setFieldValue('EDIT','PAGE1')"}}
It is made up as follows:
- SCRIPTBUTTON - the Handlebars helper
- name - a name for the button, this should be unique for each button you add
- label - the button's label (ie the text the user will see)
- onClick - what will happen when the user clicks the button. In this example the name of the page to edit is being passed to a field called EDIT
The template in the example form looks like this. It has four buttons, one next to each answer.
<div class="icmformdata">
<table>
<tbody>
<tr>
<td colspan="3" class="icmformdatacontainer">Page 1</td>
</tr>
<tr>
<td class="icmformdatalabel">Question 1</td>
<td class="icmformdatavalue">{{FIELD "QUESTION1"}}</td>
<td>{{SCRIPTBUTTON name="edit1" label="Change" onClick="helper.setFieldValue('EDIT','PAGE1')"}}</td>
</tr>
<tr>
<td class="icmformdatalabel">Question 2</td>
<td class="icmformdatavalue">{{FIELD "QUESTION2"}}</td>
<td>{{SCRIPTBUTTON name="edit2" label="Change" onClick="helper.setFieldValue('EDIT','PAGE1')"}}</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td colspan="3" class="icmformdatacontainer">Page 2</td>
</tr>
<tr>
<td class="icmformdatalabel">Question 3</td>
<td class="icmformdatavalue">{{FIELD "QUESTION3"}}</td>
<td>{{SCRIPTBUTTON name="edit3" label="Change" onClick="helper.setFieldValue('EDIT','PAGE2')"}}</td>
</tr>
<tr>
<td class="icmformdatalabel">Question 4</td>
<td class="icmformdatavalue">{{FIELD "QUESTION4"}}</td>
<td>{{SCRIPTBUTTON name="edit4" label="Change" onClick="helper.setFieldValue('EDIT','PAGE2')"}}</td>
</tr>
</tbody>
</table>
</div>
BACKPAGE and CHECKPAGE Variables
These two form helper variable fields will hold values which get set when the user presses a button.
EDIT Variable
This variable does the work of taking the user back to a page. It's a "Browser only" variable and has a "Handler Function" that looks like this.
This function is called whenever the value of the helper variable field changes. The only time the value will change is when a user presses one of the SCRIPTBUTTONs in the HTML template. It does three things:
- The BACKPAGE field is updated with the value passed to the EDIT variable (this will be the name of the page to go back to, set in the onClick function of the SCRIPTBUTTON above)
- The CHECKPAGE field is updated with the word "true". This tells the buttons on pages one and two that the check your answers page has been visited and they now need to send the user back here when they press "Next" on those pages
- The "Previous" button in the set of wizard buttons is triggered, navigating the user back to the BACKPAGE
Share this page
