Where to put submit button in a long screen with multiple inputs

Question

I'm redoing a web configuration UI for a piece of hardware. Think of a configuration UI of a standard router. You install this hardware into your network and access configuration through your browser. The UI will normally be accessed from PC and should also be available for mobile devices, but PC is definitely in a focus here.

I need to implement a configuration form with a submit button. The old design was done in material design and had this layout:

Form1, Form2 are a bit different configuration forms, that have a similar topic (Currently active SubMenu1). Think of "IP Address", "Router Name", "DHCP Configuration" etc. if it was a router. All of these have the same Submit button in the right top corner that applies only the changed inputs. For example if there is an input for a password, it will be applied only if it was changed, otherwise, the old password stays even though the input was empty. The submit button, although located on a menu bar is floating (when the menu bar is not) and always stays on the screen in exactly the same location when you scroll.

I'm redoing a UI similarly, preserving looks more or less, but changing the forms to be grouped in cards instead:

But I'm hesitant to use the same location for Submit button, as I believe there are serious issues with it from UI/UX perspective.

1. The location is extremely weird and unintuitive. The button is located on the menu that is common for all views and simply appears/disappears depending on the view. Users do not expect it to be there
2. The button although located on the menu is not attached to it and floats when menu is not.
3. It is not obvious that if you do not change the password input and leave it empty, the password is not changed. My first thought is that this submits an empty password to the system. However, I'm not 100% sure this is a problem, just find it weird.

The problem is I do not know where to put submit button here. My first guess it to make it floating and to put it in the lower right corner. I do not know how to fix the password problem though.

Is this a good suggestion? If not what should I do? And is this a good idea to leave the password box as is, or it needs to be changed?

Answer 1

As I was reading the other comments, • Position of the Submit Button at the bottom: The problem with this is that every time user edits the form he might try to find submit button, and for that he has to scroll at the bottom of the form.

• Floating Submit Button at the bottom left corner: Floating position of the submit button on the lower left corner will have more chances of interfering with form data as compared to the lower right corner.

• Floating Submit button on bottom right corner: What we can do is position the floating submit button on the bottom right corner. When the user hasn't done any changes in the form the button will be in grey color indicating not in active state and when user edits the form we change its state from inactive to active.

Answer 2

I would go with bottom left alignment on the button. https://adamsilver.io/articles/where-to-put-buttons-in-forms/

Answer 3

Now that the forms are organized into cards, why not have a submit button for each card? This way, the submit button will always be located close to the user input.

As the typical use case is that the user will only modify a few elements at a time (hopefully all in the same card?), they won't need to click 3 times.

The button would be visible only once a new input has been made and the card state (not modified, modified but not saved, modified and saved) could be also indicated visually (change in background color or border), giving an additional signal to the user where to focus their attention.

Answer 4

Is there any option to allow the form to automatically Submit changes on exit? You could then have the option for the end user to reset the form/field to the previous state if they choose. My guess is that the reset button would rarely be used and it would be more convenient for the user to not have to submit the form themselves. Allow the program to submit once the user leaves the Tab/Page.