# Uploads and conditional page flow

Source: https://govform.com/resources/documentation/article/02-uploads-and-conditional-page-flow
Topic: Tutorials

Build a practice expense claim with receipt choices, amount inputs, a file upload and an exit route. Complete [Get started with Govform](<https://govform.com/resources/documentation/article/01-get-started-with-govforms>) first.

This example uses a made-up receipt policy for learning: a valid receipt must show the amount paid, purchase date and retailer’s UK VAT number. Use fictional answers and a sample file.

## 1\. Start from a blank service

1.  In your library’s **Services** list, select **Create new service → Start with a blank service**.
2.  Enter “Tutorial 2 — expense claim” as the service name. Let Builder generate an ID, or enter your own under **Change the service ID**.
3.  Select **Create service**.

![Name your service screen for a blank service, with Tutorial 2 — expense claim entered.](<https://govform.com/images/documentation/tutorials/02-blank-service.jpg>)

A blank service starts with an introductory page and an existing confirmation page.

## 2\. Write the introduction

Open **Page 1: About this service** and select its text to open **Standard content settings → Content**. In **Text** mode, explain the sample receipt requirements and that the user will enter amounts, upload a receipt and check their answers. Say that this is a practice form. Click outside the editor and wait for **Saved**.

## 3\. Add the receipt question

1.  Select **Add next page**. In the Add page gallery, choose **Question with choices**.
2.  Set **Page title** to “Do you have a valid receipt?” and keep **Radio buttons (single choice)**.
3.  Set the selection items to “Yes”, “Yes, but it is missing the date or VAT number”, and “No”. Use **Add another item** for the third answer.
4.  Select **Add page**.

![Question with choices setup showing the receipt question and three selection items.](<https://govform.com/images/documentation/tutorials/02-receipt-question.jpg>)

Configure the question and answers in **Quick setup** before adding the page.

## 4\. Add the exit route

1.  From the receipt question, select **Add next page → Exit page**. Title it “You need a valid receipt to claim”, explain the sample requirements in **Content text**, and select **Add page**.
2.  Open **Page flow conditions** under this exit page in the sidebar. Choose **Only show this page when conditions are met**.
3.  In the condition picker, choose “Do you have a valid receipt?”, select “Yes, but it is missing the date or VAT number”, and select **Add selected answer**.
4.  Select **Add condition** and add the same question’s “No” answer.
5.  Under **Match**, select **Any condition**, then **Apply**.

![Exit page flow settings with the two invalid receipt answers selected and Any condition enabled.](<https://govform.com/images/documentation/tutorials/02-exit-conditions.jpg>)

**Any condition** means OR: either invalid-receipt answer shows this exit page. “Yes” skips it.

Keep the exit page immediately after the receipt question. It has no Continue button, but the user can go Back and change their answer. These are _page flow_ conditions; component validation conditions check an answer and do not control page visibility.

## 5\. Add claim amounts

1.  Open the exit page’s **Page content**, then select **Add next page → Empty page**. Title it “About your claim” and select **Add page**. It follows the exit page and precedes the confirmation page.
2.  Select **Add component**, find **Text input** in the component gallery, and set **Field label** to “Claim amount”. Select **Add Text input**. Builder generates the ID `claimAmount`.
3.  In its **Content** settings, change the label to “Claim amount excluding VAT” and set **Content type** to **Numbers only**. Under **Display**, set **Prefix** to `£`.
4.  Open **Answer rules → Number rules**. Set **Minimum number** to `0.01` and **Maximum decimal digits** to `2`.
5.  Add a second **Text input** labelled “VAT amount”. Set its content type to **Numbers only**, prefix to `£`, minimum number to `0` and maximum decimal digits to `2`.
6.  In the VAT component’s **Content → Developer details**, set **Field ID** to `vatAmount` exactly. The automatically generated ID may use different capitalisation. Keep both answers mandatory and wait for changes to save.

![Claim amount Answer rules with Number rules expanded, minimum 0.01 and maximum two decimal digits.](<https://govform.com/images/documentation/tutorials/02-number-rules.jpg>)

**Content** selects the number format and currency prefix; **Answer rules** sets the allowed values and precision.

These are tutorial limits. The claim amount is _excluding VAT_, so the next tutorial can demonstrate a simple percentage calculation without treating a VAT-inclusive total as the base amount.

## 6\. Add the receipt upload

1.  From “About your claim”, select **Add next page → File upload**, enter “Upload your receipt”, then select **Add page**.
2.  Select the upload component to open **File upload settings**. In **Content**, clear the repeated “Upload a file” label. Set the hint to “Upload one JPG, JPEG, PNG or PDF file, no larger than 10 MB. Use a sample receipt for this tutorial.”
3.  Open **File rules**. Keep the upload mandatory and set **Maximum file size** to `10` MB.
4.  Expand **Allowed file types and storage guidance**. Enter `.jpg`, `.jpeg`, `.png` and `.pdf` in separate file-type entries, using **Add another file type**. Wait for the settings to save.

![File upload settings on File rules with a mandatory upload, 10 MB maximum and the configured image and PDF type summary.](<https://govform.com/images/documentation/tutorials/02-file-rules.jpg>)

Use **File rules** for upload requirements, size and file types.

A real service’s limit must also suit its file store and any destination receiving the file. See [File upload settings](<https://govform.com/resources/documentation/article/23-09-component-file>) for storage and processing options.

## 7\. Add review and confirmation

1.  From the upload page, select **Add next page → Check your answers**. Use “Check your answers” as the title and select **Add page**.
2.  Select the page’s Submit button in the designer, or open **Page settings**. Set **Continue button text** to “Submit claim” and select **Apply**.
3.  Open the existing final page, “Your request has been received”. Select its title, change it to “Your claim has been submitted”, and select **Apply update**.
4.  Edit its Standard content to explain that this is a tutorial submission and no real expense claim will be processed. Keep the reference-number component. Do not add another End page: a blank service already has one.

## 8\. Test every route

Open the service overview using its name in the **Location** trail, then check **Flow**. The two invalid answers should lead to the exit; “Yes” should reach the amounts, upload, review and confirmation pages.

In **User view**, test all three receipt answers. On the exit page, use **Back** to change to “Yes”. On the successful route, try a blank amount, `100.001`, an unsupported text file, and files just below and above 10 MB. Then enter `100` and `20`, upload an accepted sample, check the **Change** links and select **Submit claim**.

![User view check answers page showing a valid receipt choice, £100 claim, £20 VAT, a sample upload and Submit claim.](<https://govform.com/images/documentation/tutorials/02-check-answers.jpg>)

Review the actual answers and file name before finishing the prototype journey.

## What you learned

-   Use the page and component galleries.
-   Join exit conditions with **Any condition**.
-   Configure numeric and upload validation with stable field IDs.
-   Reuse the confirmation page and test a complete journey.

Continue with [Pre-population, validation and testing](<https://govform.com/resources/documentation/article/03-pre-population-validation-and-testing>).