Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

So Im creating a compact forum module for bootstrap 3. The project is opensource on github. This type of forms are good in two ways: Its so 2014 and very user friendly on mobile devices.

But Im having a problem on where to put to submit button? Where is the best place?

PS! Auto submitting is not an option. The form has a fluid layout.

Open the image in a new tab for larger version.

enter image description here

Answer: The options seems to outside of the borders, bottom-left. But honestly it doesnt feel good to me. If you have a better approach please suggest. enter image description here

My own suggestion: enter image description here

share|improve this question
    
To give it a little context are you able to change it to English :) Also can you give a screenshot of the entire page? –  tim.baker Jan 14 at 21:36
    
Tim, image has been updated! –  user2360 Jan 14 at 21:48
    
thanks. I would post an answer but it would be almost identical to @salman now! –  tim.baker Jan 14 at 23:03
    
Ps. I like the green positive button in the first screenshot of yours. This is good placement as it is where users will expect it and also having it on its own "line" will reduce errors on mobiles and tablets –  tim.baker Jan 14 at 23:05

2 Answers 2

up vote 4 down vote accepted

Towards the bottom-left end of the form, outside the bounding block. It is because,

  • users scan from left-to-right and top-to-bottom. Placing anything on the bottom-left end of the form block will be noticeable immediately.

  • An input box placed at the bottom-left doesn't need to be starkly visible and a button using similar form-style will be seen, but if you place anything on the bottom-right corner of the form, it must have a high-contrast background colour.

enter image description here

share|improve this answer

If it's not a long form, the conventional placement for a submit button is below the form, left aligned.

enter image description here

Reference: Primary & Secondary Actions in Web Forms

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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