21

I am designing a long form in which all fields are mandatory and form cannot be broken down into steps should submit button be fixed at bottom keeping rest of the form scrollable or the button should be below all the fields?

What can be the pros and cons of both approaches?

51

The button should always be visible on the page somewhere and should always be clickable. It is incredibly frustrating for a user if they can't click on a button and there is no clear indication of why that is the case. You should always allow the user to click submit and then highlight all fields which are causing validation issues so the user can clearly see what to fix.

I wouldn't ever fix the position of a submit button to the bottom of a scrollable form as the user may miss fields they should have entered. The best place is directly after all of the form fields, even if that happens to be off screen and the user has to scroll down to find it. It is important that you mark which fields are required to submit the form to avoid confusion and frustration.

If you have both optional and required fields, you should clearly mark the form to show which fields are required by either labeling each optional field if only a few are optional or each required field if only a few are required. If all fields are a single type (as in your case) you should instead state that all fields are optional/required at the top of the form. You may consider repeating this message next to the submit button if the form is long enough that it will always require scrolling.

2
  • 1
    I was asked to design a side panel with a fixed bottom button section. I felt that's not a good idea, but got not wrap my head around why. You told it perfectly: "I wouldn't ever fix the position of a submit button to the bottom of a scrollable form as the user may miss fields they should have entered. The best place is directly after all of the form fields, even if that happens to be off-screen and the user has to scroll down to find it." Why hide parts of the form, and giving the user the false impression they reached the end of it.
    – Kriem
    Mar 5 '20 at 15:08
  • The presence of a "submit" button indicates there are no more steps afterwards. Contrast this with a "next" button. If there was no button at all, I'd have no idea unless there was another, more explicit progress indicator somewhere.
    – Vivelin
    Mar 12 '20 at 7:21
11

Disabled buttons are not good for accessibility reasons. They only provide aesthetic value as some screen readers skip over disabled elements altogether.

https://axesslab.com/disabled-buttons-suck/

  • Having the button fixed at the bottom of screen AND disabled? BAD, colorblind users can't necessarily tell it's disabled. Fixed position could give a false sense of where the end of the form is and what's the point of having it there if user can't even tap/click it?
  • Having the button fixed at the bottom of screen and enabled? OK, but the user could accidentally submit by accident before they finish filling out all the fields.
  • Having the button at the bottom of form and disabled? Bad, the user will have to scroll up and down searching for the incomplete field.
  • Having the button at the bottom of form and enabled? Good, if the user has an incomplete field after submitting, highlight the error and explain in the error message what the user needs to do even if the field is already clearly labelled (i.e., 'Please select years of experience.').

The primary action/submit button does not have to be visible/persistent on the screen at all times as long as it's in a logical place (end of form or wherever your users expect it to be) and highly distinguishable. Please do not start off the form in all red as Juan suggested. The user should not be alarmed right when they get on the page. And not every system is able to validate each field prior to hitting the submit button.

6

What has worked well in our company:

Next to the disabled submit button is an area that tells the user what the form is awaiting. As the form validation is run on each required field, this "Waiting for..." list gets shorter until finally it says "Ready!" in green and the submit button is then enabled.

This gameifies the form a little bit and the users always know what is expected.

Waiting for... Ready!

2

Depends what type of validation you have, how long is the form, and how often will happen that user needs to go back in some point of the form to correct the entry. If you know users return to some point in form to correct entries, having button always visible is beneficial. If you have inline validation and you are validating fields as user types them, button at the end of the form is good enough.

0

Button visible? Yes. Enabled? No. A good practice for this is to validate as soon as your empty form loads. All required fields should be marked at this point (or colored red). Only when all validations have passed, the 'required' labels dissapear, and the button is enabled.

And, only the form portion should be scrollable. Action buttons should always be visible.

4
  • 12
    Maybe I'm misunderstanding you, but being "yelled" at by validation messages before I have even tried to submit is a bad experience. Mar 5 '20 at 8:29
  • 6
    I disagree with this. A user doesn't want to be told they are wrong, especially before they have even had chance do do anything about it. Any validation that occurs as the user types should be applied a set time after the last user input to avoid throwing error messages at the user while they are busy inputting data. The submit should always be enabled and should highlight all issues with the currently supplied data. Unless it's obvious why an action is unavailable, a user shouch be allowed to perform the action and be told why they can't: disabling the action with no feedback is confusing. Mar 5 '20 at 9:16
  • One of my pet peaves on the web is aggressive form validation of email addresses, where it flags my email as invalid WHILE I'M TYPING IT (because its not matching a valid regex until after I finish with the '.com' bit at the end). This answer would compound that annoyance greatly.
    – Graham
    Mar 6 '20 at 16:28
  • Keep in mind thay this is only for required fields. All other validations should happen as nedded. Validating email before any input is wrong. So is allowing the user to click a button when nothing will happen. Mar 6 '20 at 16:39
0

Answers always depend on the context, which is too unclear at this point. I assume that when you say the form cannot be broken (although it's a long form) you have a good reason for this? Because breaking up long forms is actually rather good practice, to unburden the psychological load of a user. I have designed many forms and have never found a reason not to break them up when they get long so I wonder what your reason might be. Besides that, I would put the 'submit' in the top right of the form where it's always visible for the user. Depending on the business requirements you can disable or enable it, but when the user hasn't entered all necessary inputfields yet, I wouldn't enable it. There is no reason letting the user perform an action only to be told she can't perform that action. What's more is that in this case this bad experience gets repeated every time a required inputfield is left blank. The best UX in my mind is forms with only the bare minimum of inputfields and all of them are mandatory (otherwise you don't bother the user with it). If an inputfield isn't clear and requires any kind of message, I would put explanatory labels underneath the inputfield or within a tooltip next to it, clarifying to the user what is expected of her.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.