User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
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/
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.
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.
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.
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.
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.
