Categories
Portfolio

Creating form navigation for a web prototype

Create navigation within and between steps of a prototype registration form. Use semantic HTML instead of classes for CSS. Patterns for back links and branching.

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!

Nesting messes occur when forms lack a target=”_blank” attribute.

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.

I warn prototype users that navigating to a next or previous step will open in 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>
Codepen’s Analyze HTML tool reported an issue with absolute URLs.

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 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.

Primary button followed by a secondary button in a focus state.
Primary and secondary buttons based on GOV.UK Design System button component

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.

An in-page anchor link presented early in a tall page.

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.