Inline Field Errors Beat The Bootstrap Alert Popup By A Long Way

tl;dr we moved form errors out of a bootstrap alert popup at the top of the page and into inline messages under each field, and completion went from 46% to 71%.

The form is six fields on a quote page. Bootstrap's alert component was doing exactly what it does, red box at the top of the form, please correct the errors below. On desktop that is fine because the whole form fits on the screen. On a phone the person is at the bottom of the form with a thumb on the submit button, they tap, the page scrolls nowhere, and the only feedback is a red box 700 pixels above them that they never scroll back up to read. They tap submit again. Then they go somewhere else.

Two things fixed it. The message goes under the field that failed, in red, and the first failing field takes focus so the phone scrolls to it on its own. That second part is the one people leave out. Focus management is not a nice to have on mobile, it is the entire mechanism by which somebody finds out what went wrong.

The other thing worth saying is that the biggest single source of errors was a phone number field with a regex that rejected spaces. Nobody types a phone number without spaces. Better error handling was real but it was papering over a validation rule that should never have shipped in the first place.