What is good alternative to show modal dialog with very long forms?

Question

I want to see the alternatives of modal dialogs containing long forms so that the design don't break.

Answer 1

Wizard Modal

Wizard Modal is pretty much what you are looking for, it's generally a good practice to divide your long forms into wizard, and if you extract the wizard into a Modal, then you satisfy the objectives you need.

In the background you can have the original content of the page.

Answer 2

You have 2 choices that I know of when dealing with limited screen space.

• You can either make the modal content scrollable vertically, such that the user can scroll to the rest of your content (may want to make them aware of scrollable content either by adding an arrow at the bottom that hides using JavaScript or by moving your confirmation buttons to the bottom of the scrolling content),
• or you may want to have multiple pages/tabs in order to maintain a certain modal size. If you so choose to have multiple pages inside your modal, a good idea would be to try to group like input items together in order to make it feel more natural for the end user.

Answer 3

Depending on the size of modal, your 2 statements are almost mutually exclusive - the bigger the modal, the more it obscures the content in the background.

If the modal dialog is not too big, you could make it draggable, so that it can be moved around the page, thus allowing the user to view the background just by moving it around the bit you need to see (you might need to move it multiple times to read everything).

You could make the modal scrollable, thus keeping its size manageable, however this should probably be avoided as it is not a good interaction in a modal.

If the modal dialog is huge, you might need to reconsider the UI interaction, e.g. perhaps use a panel attached to one side, which can be collapsed when you need to see the background content, then expanded again when you need to continue working on the form?