Where to place form error messages?

I have a checkout form that scrolls down beyond the bottom of the viewport.

In the past, I would place data-entry/validation error messages along side the suspect field.

However, I seem to recall hearing that a more modern design is to place all of the error messages at the top of the form so the users sees them right away and all in one place?

Is this true?

My reason for wanting to consolidate error messages and move them to the top is fear that someone will fill out the form correctly except for say the last few fields, and when they click “Process Order”, the php page will reload, but the error messages won’t be visible unless you scroll down, and this could frustrate someone checking out and they might abandon checkout.

But another concern I have is that if you put all of the error messages at the top of the form, then while the user can see them right away when the form/page reloads, it might be difficult for them to map the error messages to the fields. For example, let’s say my Checkout form has 20 fields, and they mess up Field #3, Field #11 and Field #18. Won’t that be a pain for them to figure out which fields need to be corrected?

Could definitely use some advice on how to make my checkout form modern and user-friendly to ensure that their checkout is successful!


Put all the error messages at the top and then highlight the individual error fields in red.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.