Forms with multiple submit buttons are problematic

Forms with multiple submit buttons are problematic for keyboard users because of how submission works. A user can submit a form by pressing Enter, when a field is focused.

If there are multiple buttons, the form will behave as if the user pressed the first button in the Document flow. This isn't always desirable. For example, you might have an address form with a postcode look-up.

Delivery address form
Delivery address form with multiple submit buttons.

Pressing Enter will always perform a postcode look-up because the Find Address button is the first button.

There are two ways to solve this problem.

1. Split up the forms

The best solution is avoidance: split the form into separate steps. In this case, let users search via postcode with an option to enter their address manually. This way there's just one button per form, avoiding ambiguity and reducing cognitive load.

Delivery address form split
Delivery address postcode lookup with just one call to action

2. Choose a primary button

If you can't split up the form, then the other approach involves having to choose a primary action which isn't always obvious.

In any case, if the primary action's button doesn't come first in the Document flow, you can duplicate it and place it at the top of the form.

To remove it visually you'll need to use CSS like this:

.visually-hidden {
  border: 0!important;
  clip: rect(0 0 0 0)!important;
  height: 1px!important;
  margin: -1px!important;
  overflow: hidden!important;
  padding: 0!important;
  position: absolute!important;
  width: 1px!important;

However, as a user tabs to the hidden button, the interface will appear to be unresponsive. This is because the button is in focus but hidden, which can disorientate users.

To fix this you can give the button a tabindex="-1" attribute which stops the button from being navigable via the keyboard.