Redesigning forms — making submit buttons helpful

Client side form validation is hard to get right. In this post, I’ll attempt to address one issue that I’ve noticed on many sites.

A common scenario is to have a page of optional and mandatory inputs including text entry with different validation requirements, mandatory checkboxes and selection lists. While moving through the form (usually as quickly as possible), it’s easy to miss something. At the end of the form is the submit button.

One standard practice is to disable the submit button until the form is complete and valid*. This sounds like common sense, but actually creates a pretty big usability problem. The user doesn’t know what’s wrong, they just know the button doesn’t work. At this point, there’s a good chance the person filling out the form will blame your website for being broken, and either go somewhere else, make a complaint or call a help number.

Validation messages are likely off screen, and unfilled mandatory fields will display no validation messages. Mandatory checkboxes (e.g. have you read and agree to our terms) can be especially hard to notice. A message is needed where the user’s attention is — the submit button.

I’ve hacked together an example form with some validation problems, and prototyped a take on a fixed submit button.

The prototype is here.

We know the user will look at the submit button, so it’s a good place to show a summary of issues in the form. The user will want to know:

  • Why the button doesn’t work
  • How many things are wrong
  • Where to fix them
The submit button with warning dropdown

I’ve attached an extra error button to the submit button, a number representing the issue count, and a dropdown list which pulls in content from the field’s label as a link. Clicking a link scrolls to the question and highlights the field containing the error.

I’ve added some animation to the transitions using CSS3 to draw attention to the change, give some extra context to what the new element is about and just make it look nice.

This is an untested prototype, but I’ll try working it into my next web app design. Let me know your thoughts, if you have a link to something similar, or any requests for what micro-interactions I should look into next.

* Another take on this is to allow the user to click the submit button, then display a message containing all the missing and invalid entries. I feel that this is a bit jarring in practice. It’s like failing a test rather than working with someone to complete a form.