Overlay an HTML page with an HTML form

Question

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!

Answer 1

I'd be thinking about option #2.

When the user asks for help, load the help-form dynamically into a div that you can pretty up with a lightbox of sliding drawer effect or whatever.

If possible, I'd do all the processing of the long form on the client side, and use the results to dynamically update the short form.

Answer 2

I use Colorbox for this kind of stuff it's really good.

You can specify the content inline or via another URL (which is what I do). It's probably better to use this second method as it keeps your webpage a lot cleaner and only requests the form content if required. It also means you can post back to that form itself (via AJAX if required) keeping the whole experience cleaner

Check it out here - click "Tag this smiley". The form is taken from a remote URL and posted back to it inside the form using jQuery. It's obviously a simple version of what you want but works, and looks, really nice.

For your scenario where you want a decent fallback for users without javascript I would have the form on the webpage but hidden via javascript, then use Colorbox to load use that content for the popup when required.