1

I have a seen some examples of bootstrap forms that actually look like a tax/complex printed document:

enter image description here

I seem to not be able to find it now and was curious if anyone can point me to an example or possibly a lib which makes this possible.

Improve this question
6
  • I think this would be better asked on the stackoverflow forum.
    – Mayo
    Commented Apr 11, 2015 at 15:11
  • 1
    I would normally think that as well but I thought the UX community might better know the float label pattern and remember some online examples of it. I think the SO community might be a better fit for "how I code this". Thanks for the time commenting
    – John
    Commented Apr 11, 2015 at 15:14
  • What is the issue? Are you trying to get multiple success colors on a line with different fields; some other tech type issue?
    – Mayo
    Commented Apr 11, 2015 at 15:52
  • @John this question is about how to implement a layout so it's not appropriate for UX.SE. But what you're looking for should be quite easy to create using pure CSS on top of bootstrap. I would recommend using bootstrap row elements and then percentage width containers for the horizontal fields. Good luck!
    – tohster
    Commented Apr 11, 2015 at 16:41
  • From a UX perspective, why would you want to emulate a complex printed form like that? The reason these forms are typically so dense and laid out the way they are is due to the size and dimensions of the printed page--which isn't an issue on the web.
    – DA01
    Commented Apr 12, 2015 at 0:12

2 Answers 2

Reset to default
2

Since this is in the UX forum I'm going to give you some UX feedback. :)

Side-by-side forms, particularly for complex forms, are not good from a usability perspective. Best practices for form layout is a single column form, or possibly two very clear, distinct columns.

Save yourself some work and forget about the form library or coding this up. It won't work as well as a single-column layout and it's going to be a lot of work; if you can avoid it, by all means do.

The complex forms that you reference were driven by printing constraints. Forms were designed to fit as many fields as possible per page in order to reduce paper and printing costs. In other words, it was never an optimal design for usability or complexity – it was a design choice made based on other constraints, i.e. reproduction cost.

Luke Wrobeleski has written extensively about form design and is a good resource; here's an example article: http://www.lukew.com/ff/entry.asp?832

Improve this answer
0

Agree with ElBel. it could be a 1 column form, with information grouped for clarity. you could group your info, spouse's info, address separately.

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.