I am working on a form page that has a name field, including Prefix, First Name, Middle Name (NOT Initial), Last Name and Suffix. The client would like to have all these fields on one line. So here's the challenge, our width is limited to 960px and we are locked into a 16px font.
The project is pretty far along, but I'd really like to figure this out as it would make the client very happy. However I'd like to do it without making it too complicated.
I considered placing this as a form that they complete and then it collapses just displaying the name in it's entirety. Then having an edit button to the right of the field in case they need to go back and change it. This would look cool, but it is extra steps.
Is this something that is even worth pursuing? Has anyone seen it done better/similar? Thoughts?
Added a screenshot. It follows the pattern of the remainder of the site, but this is the only place where I'm having an issue. The biggest problem is the font size and the restricted width. Trying to fit this all one line, I tried a couple of things. The first was to have this as an open module and upon completion, collapsing it to a display field of one line going across, leaving an edit button in case it should need to be changed. The second was the google contact method where the user enters all the information one one line then clicks a button to distribute the entered information to the correct fields. Neither of which the client liked. Hence my posting the question here.