Hidden optional fields in form design

Question

On a web-app I'm working on, we have many forms inside dropdown menus.

On many of them we have an optional field: Description. This field has been added for the users that want to work on a more "methodical" or pragmatic way.

Unfortunately a "description" textarea takes precious space, especially in case of our quick forms in the dropdowns.

I was thinking to hide the textarea and to put a (+) button close to the label. By clicking the (+) the user enables the hidden text area and has the possibility to fill a description.

What UI/UX thoughts do you guys have about it? I think it could help UX and the overall form design.

Some notes:

• Javascript is enabled, and it's a fundamental requisite for the web app.
• 99% of our users does not use mobile devices.

Answer 1

In my organization we us jQuery to bind a simple function to slide down/display a hidden div that contains the other inputs/content. Based on a specific radio/checkbox/dropdown list value selection the function executes. We also style the div so the contents appear to be indented to provide the context that its a sub-question. See example below.

Answer 2

I agree more information would help. Sometimes you want to encourage users to fill-out the optional description, but the opposite may be true too. It would also be helpful to know what typical questions and dropdown values are.

I think here are two basic approaches, but in either case, I would definitely use self-adjusting input field that grows in height as you type.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

You could go with an automatically expanding textbox for the description. It would keep the fields rather unobtrusive when not used.

There is a good article/example here:

http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

^{download bmml source – Wireframes created with Balsamiq Mockups}