Show different pages based on user answers
By default, forms in the GOV.UK Prototype Kit send users to a single next page. But sometimes you’ll want to show different pages depending on how someone answers a question — for example, to collect more details if they select a certain option.
One way you can do this is by routing users based on their answers to either radio buttons or checkboxes.
Routing radio buttons
If you want to change which page is displayed based on someone’s radio button answers create a new page and follow the examples on the GOV.UK Design System for the radio component and button component in the GOV.UK Design System.
Example code Javascript
Open app/routes.js under //add your routes here. Copy and paste the code and replacing the variables (in this case ‘/radios’ ‘this’ ‘Yes’ and ‘page-title’) with what you have in your prototype.
If you don’t know what these things are in your prototype then you can find more information https://prototype-kit.service.gov.uk/docs/create-routes.
router.post('/radios', function(request, response) {
if (req.session.data['this'] == 'Yes') {
res.redirect('page-title');
} else {
res.redirect('page-title');
}
})Routing checkboxes
If you want to change which page is displayed based on someone’s checkbox answers create a new page and follow the examples on the GOV.UK Design System for the checkboxes component and button component in the GOV.UK Design System.
Example code Javascript
Open app/routes.js under //add your routes here. Copy and paste the code and replacing the variables (in this case ‘/radios’ ‘this’ ‘Yes’ and ‘page-title’) with what you have in your prototype.
If you don’t know what these things are in your prototype then you can find more information https://prototype-kit.service.gov.uk/docs/create-routes.
router.post('/checkboxes', function(request, response) {
let exampleRoutes = request.session.data['example']
if(exampleRoutes.includes('this')) {
response.redirect('page-title');
} else if(exampleRoute.includes('this') && exampleRoute.includes('that')) {
response.redirect('page-title');
} else {
response.redirect('page-title');
}
});More routing strategies
You can find examples of more complex routing strategies in our routing examples prototype.
This includes things like:
- multiple conditions
- routing based on user types
- skipping questions