In this post I share how I created navigation within and between steps of a web registration form. Using Codepen as my prototyping tool, I connected pens into a multi-step flow. I used well supported HTML attributes to create useful and usable navigation mechanisms:
formattributes to create forward navigation
- most steps include a link to navigate backward
- to branch the flow I added a
formactionattribute on a submit button
Mapping form navigation
In wireframing a form wizard I uncovered a flow improvement.
Instead of a single check answers page immediately before the confirmation screen, … insert a check answers page after each major sectionFowler, 2020
To iterate on this called for visualising a revised flow.
Mapping the flow made it clear which major sections need a check answers page. I replaced the overwhelming single check answers page with two smaller pages.
I also labelled each form step with the relative URL of a pen I created. I’ll come back to why we need relative URLs instead of absolute URLs. My flow map now serves as both a handy visual and a reference for connecting form navigation.
Navigating forward with form attributes
Submitting a form is the usual way to navigate from one step to the next. This is straightforward for a web prototype, with a couple of extras to build in for Codepen. I combine 4 HTML attributes on the
form element to create forward navigation.
<form ... novalidate method="get" target="_blank" action="/vfowler/pen/yLNPNLp">
Our form has many required fields and other HTML5 input constraints. To focus on creating form navigation, I do not want to waste time filling in fields with valid input.
HTML5 gives us form field validation for free. The problem is that the default messages browsers provide are not always useful and typically do not work with assistive technology.Avoid Default Field Validation by Adrian Roselli
Default messages will appear in our web prototype unless we suppress browser validation. So remove browser validation by adding the HTML5
novalidate attribute to the form.
Side note: For inclusive forms, make the effort to write your own validation messaging. See my post upgrading form validation messages.
Codepen baulks when submitting a form via
method="get" to submit is generally not recommended. It appends all form input to the URL exposed in the browser address bar. For instance,
https://codepen.io/vfowler/pen/yLNPNLp?firstName=&lastName=&... Yet for prototyping, it is necessary to use
method="get" for the next step to load. If parameterised URLs are distracting, consider showing your prototype full screen.
For security, Codepen uses sandboxed iframes for editor and full page views. Without a target attribute, the next step loads nested in the current step preview pane!
To avoid nesting in frames, we must load the next step via
target="_blank". As a courtesy I warn prototype users up front about the necessity to open each step in a new browser window.
The action of a form is the program that is executed on the server when the form is submitted.HTMLFormElement.action
For a web prototype, I only use the
action as a form navigation mechanism. I set each
action attribute to the relative URL of the next step. This opens the next step upon submitting the form.
Creating back links
The GOV.UK Design System back link component helps users navigate to the previous page in a multi-page transaction. Likewise, I created back links to navigate from step 2 back to step 1, and so on.
More relative URLs
My first attempt at back links used absolute URLs.
<a rel="prev" target="_blank" href="https://codepen.io/vfowler/pen/BayReEJ">Back</a>
Using absolute URLs will work. But, to resolve an issue reported by the Analyze HTML tool, I switched to relative URLs.
<a rel="prev" target="_blank" href="/vfowler/pen/BayReEJ">Back</a>
Form back links are not for SEO
I added a
rel="prev" to my back links. Although Google does not use rel=next/prev for search indexing, this is irrelevant to form flows. Back links are for step 2 and onward. It is pointless to direct search engine traffic to anything beyond step 1.
Drop a class, use semantics
Unlike the GOV.UK Design System, I am not using a
class for back links. Instead, setting
rel="prev" is favourable as:
- it levers an existing vocabulary, so there is no need to invent or preach a class name
- styling these links via their attribute selectors means semantics get baked in
Whether the semantics adds value to assistive technology users is unclear to me for now. Do screen readers make use of
rel="prev"? How does voice input benefit?
At the very least, semantic HTML is beneficial to web development and reduces maintenance.
Branching with formaction
When filling out the lengthy idea details section of this form, users may need more than one session. To enable this branching, I designed an option to save progress and come back later.
Like back links earlier, our secondary button has no need for a class. We can style buttons with a
formaction attribute different to those lacking one. The
formaction attribute also provides a mechanism for branching the form flow.
“Used with a submit or image button”, a
formaction attribute “overrides the
action on the
<button type="submit">Save and continue</button> <button type="submit" formaction="/vfowler/pen/QWwxwad" id="saveAndReturn">Save and come back later</button>
Bonus: add an in-page link
The idea details section includes 6 multi-line textareas plus a few other inputs. This step is a tall page. For convenience, I provide a link to jump from the top of the page to the Save and come back later button.
This in-page link
href is set to a hash followed by the
id matching the button. Clicking the link both scrolls to the button and puts a focus state on it, as shown above.
<p>If you wish to, <a href="#saveAndReturn">save and come back later</a>.</p>
The intention of introducing this navigation aid early is twofold:
- inform users that an option to complete later exists
- reduce anxiety of needing to complete in a single session
I hope these tips and techniques are helpful in your next form project. Creating form navigation in HTML results in flow improvements and robust prototypes. This leads to solid patterns for web form navigation, back links and branching.
In the past I resorted to CSS classes for styling back links and secondary buttons. Levering HTML attributes makes styling easier. Using HTML attributes also imbues semantic richness and lowers code maintenance efforts.
Next in this series, I’ll cover useful Codepen features for multi-step forms. Also upcoming: colour and contrast for prototypes, and consistency via CSS custom properties.