I have the following situation: I have to implement a form for a web app with several file upload inputs, that need a rather large block of text next to them (as in the screenshot below). The problem is that this box repeats itself several times (three, to be more precise) on the same page, and it leads to a bulky and really unfriendly layout.
Moreover, the files that need to be uploaded don’t have a fixed number, and also need additional details to be inserted (as below), which leads to an even uglier and unfriendlier layout.
What I’ve tried so far, beside the above layout, are the two versions below:
- a collapsible text block:
- a right-side text block:
Obviously, none of them is nice, but I really can’t find a better way to do it. So, my question is: how can I possibly construct this form in a way that is both user-friendly and aesthetically pleasant?
I should probably also mention that I’m not a designer (so if anybody gets offended by the way it looks, please accept my apologies—I mean it!), but I’m stuck with implementing it from scratch. And no, I can’t hire one. (And I’m using Bootstrap, if it matters.)