Here's a screenshot :

where to put my save button

Every tab, there should be a save button but I don't know where to place my save button. Where should I put it? Is it okay if I place a button below the form with width:100%?

  • 1
    Does this question answer your query? It's likely a duplicate of your question, unless you have different requirements not covered by that post? – JonW May 9 '12 at 9:44
  • I read that, but I wanted a different approach.. – rjmcb May 9 '12 at 9:47

If your form is likely to grow quite long - for example there is longer content on the other tabs, or the addition of a photo extends the length of the form below the fold then I would suggest a 'Save Personal Changes' button at both bottom right and at top right so that it's always visible - more importantly, so that people for whom the bottom button is hidden will always see the top button.

I deliberately used the phrase 'Save Personal Changes' as an example so that the label indicates the save button is related to the Personal tab - not to all tabs. Use a different label for each tab if you need to have one on each page.

If you plan to put a button in both these positions, then I would avoid making it span the full width - and in fact I'd probably avoid doing that anyway as you already have many elements that span the full width and you want the primary action to stand out not, not blend in. You can use colour to make the button stand out without having to physically make it bigger.

If your form is never going to reach below the fold then just keep the button at bottom right.

If your form is always going to be a sequential entry of all fields then consider only having the button at bottom right as that will be the natural completion point (in a left to right language), whereas if the form is likely to be edited/updated with a small number of changes and is long, then use the bottom and top approach.

If your form is spanning the full screen width then avoid using top/bottom right as the button can become too distant from the work area (although I'd recommend restrict the width to a sensible setting).

Currently your Choose File button looks like the primary action button (not helped by its location), you will want to differentiate the style of the Save button from the Choose File button.


I think the bottom right hand corner of the screen on each of the individual tabs will make the most sense to the user.

My question is - what is with the user completing his weight? Scary stuff!

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.