Hi folks, this is a question about the best way (or least effort of the best ways) to overlay an html page with a form. Best in this context meaning best user experience whilst meeting the functional requirements.

Let's say I have a page with a short form on it; the user has to enter some financial details. To assist the user to enter an accurate value for one of the fields there's another, much longer form. The longer form needs to be displayed only if the user requests the help.

For users without javascript, clicking a link will submit the short form (persisting already filled fields in a session) and the server will respond with the long form. They'll submit the long form and the server will combine the submitted data with the persisted data and serve the short form again - with the fields populated.

For users with javascript I want to overlay the short form page (in a lightbox stylee) with the long form, allow them to populate the long form and then go back to the short form with less round-trips to the server.

Do I:

• Overlay the short form page with an iframe whose target is the long form?
• Request the long form over ajax and stuff it into a div?
• Generate the long form entirely on the client-side?
• Some other wizadry I haven't thought of?

A short explanation of the best mechanism will do me very nicely indeed. Thank you very much!