3

So, I'm creating a compact form module for bootstrap 3. The project is opensource on github. This type of forms are good in two ways: It's 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

Improve this question
4
  • 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
    Commented Jan 14, 2014 at 21:36
  • Tim, image has been updated!
    – nFu9DT
    Commented Jan 14, 2014 at 21:48
  • thanks. I would post an answer but it would be almost identical to @salman now!
    – tim.baker
    Commented Jan 14, 2014 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
    Commented Jan 14, 2014 at 23:05

2 Answers 2

Reset to default
6

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

Improve this answer
7

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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