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

  • Don't you mean popovers more than modals? – asiegfried Nov 22 '16 at 14:25
  • @asiegfried popovers are supposed to have small content as far as I know – Jivan Dec 1 '16 at 3:24

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.

enter image description here

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

  • Wouldn't this introduce more actions (Next/Back clicks) on your form and make it longer for the user to finish the form? – ton Apr 13 at 4:39

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.

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?

  • 1
    i got one modal scren with a lot of data to be filled by the user, and finally i made a smaller one with differen sheets. Similar to wizard. Instead of one big screen with all the infromation, i break it in 2 sheets with organized info. Hope this idea can inspire something usefull – Tirma Nov 22 '16 at 13:18

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.