You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository is currently being migrated. It's locked while the migration is in progress.
intro-text: Use the form step - minimal template to create all pages of a minimal form flow except for the introduction, review, and confirmation pages.
7
+
intro-text: Use the form step - minimal template to create all pages of a minimal form flow except for the introduction and confirmation pages.
This template is for all internal pages of a digitized form that asks Veterans to enter information, select an option, or upload supporting documents.
20
-
The form page template uses the minimal header and footer components in a form flow. The header and footer are simpler and don’t show navigation elements. This frees up space on the page and allows the form submitter to focus on the task
21
21
22
-
We display the [plain language form name](https://design.va.gov/templates/forms/introduction#title-subtitle-and-intro) in the minimal header without any heading structure. The plain language form name should match what is on the introduction page.
22
+
The form step - minimal template uses the Header minimal and Footer minimal components in a form flow. The header and footer are simpler and don't show navigation elements. This frees up space on the page and allows the form submitter to focus on the task.
23
23
24
-
Use the H1 of the question page to describe the information needed or ask the specific question on the form page.
24
+
We display the [plain language form name](https://design.va.gov/templates/forms/introduction#title-subtitle-and-intro) in the Header minimal without any heading structure. The plain language form name should match what is on the introduction page.
25
+
26
+
Use the heading level 1 (`H1`) of the question page to describe the information needed or ask the specific question on the form page.
25
27
26
28
### Examples
27
29
There are two versions of the form page template:
@@ -34,71 +36,73 @@ There are two versions of the form page template:
34
36
35
37
36
38
The authenticated form page template consists of:
37
-
1.[Minimal header]({{ site.baseurl }}/components/header/header-minimal) with form title & subtitle
39
+
1.[Header minimal]({{ site.baseurl }}/components/header/header-minimal) with form title & subtitle
{% include component-example.html alt="An example of a form step page for unauthenticated users." file="/images/templates/forms/minimal-form-step/2-example-unauth.png" caption="Anatomy of the form step template for unauthenticated users." class="x2" %}
53
55
54
56
55
57
The unauthenticated question page has these items:
56
-
1.[Minimal header]({{ site.baseurl }}/components/header/header-minimal) with form title & subtitle
58
+
1.[Header minimal]({{ site.baseurl }}/components/header/header-minimal) with form title & subtitle
**All new forms should use this template.** The templates in Figma and in code provide good starting points for new form development. Your forms will have unique `<H1>`'s and be more accessible for users.
72
+
**All new forms should use this template.** The templates in Figma and in code provide good starting points for new form development. Your form pages will have a unique `H1` and will be more accessible for users.
73
+
74
+
This template is for the form pages themselves. The Header minimal and Footer minimal components shouldn't be used on the form introduction page or the form confirmation page. Use the full header and footer for those pages. This allows users to log out or navigate to other parts of VA.gov.
71
75
72
76
### When to consider something else
73
77
74
-
Teams who want to migrate existing forms to this new template will gain advantages by having unique `<H1>`'s for every form page. However, it can be quite a considerable time investment because nearly every page in a form flow would need to be edited. If forms have already included `<H3>`'s on every form page, the lift will not be as large.
78
+
Teams who want to migrate existing forms to this new template will gain advantages by having a unique `H1` for every form page. However, it can be quite a considerable time investment because nearly every page in a form flow would need to be edited. If forms have already included heading level 3 (`<h3>`) elements on every form page, the lift won't be as large.
75
79
76
80
### Instances of this template in production
77
81
[Request personal records (VA Form 20-10206)](https://staging.va.gov/records/request-personal-records-form-20-10206/introduction)
78
82
79
83
## Structure
80
84
81
-
### 1. Minimal header with form title and subtitle
82
-
The form step template and the review page template uses the [minimal header component]({{ site.baseurl }}/components/header/header-minimal).
85
+
### 1. Header minimal with form title and subtitle
86
+
The form step template and the review page template use the [Header minimal component]({{ site.baseurl }}/components/header/header-minimal).
83
87
84
88
Use the same plain language form title and subtitle as the form introduction and confirmation pages.
85
89
86
90
[Review the form introduction template for guidance and examples of a form title and subtitle.]({{ site.baseurl }}/templates/forms/introduction#structure)
87
91
88
-
The form title and subtitle are in the minimal header without any semantic heading structure.
92
+
The form title and subtitle are in the Header minimal without any semantic heading structure.
89
93
90
94
91
95
### 2. Back link
92
96
93
-
Instead of a breadcrumb, we include a back link below the minimal header in this template. The back link remains consistent across all question pages within a single form. Its text should read “Back to previous page”.
97
+
Instead of a breadcrumb, we include a back link below the Header minimal in this template. The back link remains consistent across all question pages within a single form. Its text should read “Back to previous page”.
94
98
95
99
[Learn more about the expected behavior for the back link]({{ site.baseurl }}/components/link/#when-to-use-a-back-link).
96
100
97
101
We use the back link to reassure users that they can go back and change previous answers.
98
102
99
-
The back link should not break the browser back button. And it should take users to the previous page they were on, in the state they last saw it.
103
+
The back link shouldn't break the browser back button. And it should take users to the previous page they were on, in the state they last saw it.
100
104
101
-
Exception: If the form submitter completes an action that they can do only once, like submit the form, the browser back button should still navigate the user to the previous page, but the user should not be able to submit the form again.
105
+
Exception: If the form submitter completes an action that they can do only once, like submit the form, the browser back button should still navigate the user to the previous page, but the user shouldn't be able to submit the form again.
102
106
103
107
104
108
### 3. Progress bar - segmented with step label
@@ -144,7 +148,7 @@ The VA Design system has a number of [components]({{ site.baseurl }}/components/
*[Ask users for ssn]({{ site.baseurl }}/patterns/ask-users-for/social-security-number)
151
+
*[Ask users for… Social Security number]({{ site.baseurl }}/patterns/ask-users-for/social-security-number)
148
152
149
153
If you need a new component or pattern, you will need to follow the [experimental design process.]({{ site.baseurl }}/about/contributing-to-the-design-system/experimental-components-and-patterns)
150
154
@@ -170,8 +174,7 @@ For complex questions, you may need to use one of these options to provide addit
170
174
* Body text after the H1 page header (which can also serve as hint text for all fields on the page, and may include examples or bulleted lists)
You can set the contents of a `<legend>` on the page as the page header (`<H1>`). But, you may not always need the h1 to be inside the legend.
174
-
177
+
You can set the contents of a `<legend>` on the page as the page header (`H1`). But, you may not always need the `H1` to be inside the legend.
175
178
176
179
#### Fieldsets & legends
177
180
@@ -239,11 +242,11 @@ The feedback pattern allows VA.gov to collect feedback from users via Medallia.
239
242
[Learn more about the feedback pattern]({{ site.baseurl }}/patterns/ask-users-for/feedback).
240
243
241
244
242
-
### 12. Minimal footer
245
+
### 12. Footer minimal
243
246
244
-
The minimal footer component strips out all of the navigation found in the full footer that is found on other VA.gov pages. This helps users stay focused on the task at hand. The VA Seal is a link to VA.gov.
247
+
The Footer minimal component strips out all of the navigation found in the full footer that is found on other VA.gov pages. This helps users stay focused on the task at hand. The VA Seal is a link to VA.gov.
245
248
246
-
[Learn more about the minimal footer component]({{ site.baseurl }}/components/footer/footer-minimal).
249
+
[Learn more about the Footer minimal component]({{ site.baseurl }}/components/footer/footer-minimal).
247
250
248
251
249
252
## Research findings
@@ -255,4 +258,14 @@ This form page layout aims to address pain-points related to the amount of redun
255
258
* For Veterans with low vision who use magnification on mobile devices, questions can be hidden below “the fold” completely
256
259
257
260
## Code considerations
258
-
[Minimal header (minimal form flow) pattern documentation](https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/patterns/minimal-header/README.md) details how to implement this variation.
261
+
[Header minimal (minimal form flow) pattern documentation](https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/patterns/minimal-header/README.md) details how to implement this variation.
Copy file name to clipboardExpand all lines: src/_templates/forms/review.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,6 +35,8 @@ The Review page consists of:
35
35
36
36
## Structure
37
37
38
+
For forms that use the standard form-step template, the Review page should use the standard [Header]({{ site.baseurl }}/components/header/) and [Footer]({{ site.baseurl }}/components/footer/) components. For forms that use the minimal form-step template, the Review page should use the [Header minimal]({{ site.baseurl }}/components/header/header-minimal) and [Footer minimal]({{ site.baseurl }}/components/footer/footer-minimal) components so that the header and footer match the rest of the form flow.
0 commit comments