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:
- 4
form
attributes to create forward navigation - most steps include a link to navigate backward
- to branch the flow I added a
formaction
attribute 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 section
Fowler, 2020
To iterate on this called for visualising a revised flow.
Mapping the flow made it clear each major section needed a check answers page. I replaced one overwhelming check answers page with two smaller pages.
In my map, I 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 ones. 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">
novalidate #
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.
method #
Codepen baulks when submitting a form via method="post"
. Using 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.
target #
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.
action #
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, search engine indexing is irrelevant to form flows. Back links are for step 2 and onward. It is pointless to direct search engines to anything except step 1 in a flow.
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 via 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 form
itself”.
<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 of the existence of an option to complete later
- reduce anxiety of needing to complete in a single session
See the Pen Step 1 | StartSpace Membership Application – prototype by Vernon Fowler (@vfowler) on CodePen.
Summary #
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.