2

Design Patterns For Nested Forms

9 years ago from , Developer

I'm wondering if anyone has any good UI/UX examples of websites that utilize nested forms.

By nested forms, I mean something where you are creating an object and the object has sub-objects in the same form.

For example: You're adding a new wine to a database and have to add the brand. The brand is a dropdown with many brands, but there should also be the option to create a new brand. Should the new form to create a brand appear in a modal or...?

If the brand has many producers and you can create a new one, then in brand modal do you present another modal to create a producer?

Just wondering if you have seen creative solutions to this problem.

5 comments

  • Ege GörgülüEge Görgülü, 9 years ago

    Not to shamelessly self-plug, but working at my current company, I naturally come across a lot of tricks utilized by our users and it's impossible for me to convey them without referring to our own forms.

    One way would be to have a multi-paged form and show an extra page if the user chooses the other option. Here is a quick example form. Basically, if you select any of the existing brands it will skip the maker info page.

    Alternatively, you can also choose to show the additional fields right underneath the brand without using page breaks. Like so.

    1 point
  • Clark WimberlyClark Wimberly, 9 years ago

    It's not a perfect example, but my build, http://thezebra.com, has some nested forms in the main compare view.

    1 point
  • Cai Cardenas, 9 years ago (edited 9 years ago )

    This article springs to mind:

    https://medium.com/@mibosc/responsive-design-why-and-how-we-ditched-the-good-old-select-element-bc190d62eff5

    It will partly depend on the device that the website is viewed on. Larger devices can probably comfortably hold modals as an overlay, whereas smaller mobile devices will more likely need to take the user to a new screen temporarily.

    Ultimately it also depends on the specific context and situation you're dealing with. There is no one right solution for everything.

    1 point
    • Robert GrazioliRobert Grazioli, 9 years ago

      Really interesting—reminds me a lot of Basecamps navigation.

      0 points
    • Brian WeinreichBrian Weinreich, 9 years ago (edited 9 years ago )

      Awesome! That's exactly the kind of unique thought I was looking for. I've actually seen this implemented quite nicely in the Basecamp mobile app as well.

      Edit-- ha, Rob I thought the same thing!

      0 points