How can you create a wireframe for a complex form with conditional fields?

There are multiple methods for wireframing adaptive forms. Two styles common in our workflow are storyboarding and grids. With storyboards, represent a branch in display as a relationship between two states. This makes it easy for others to understand quickly, at the cost of replicates design time. Conversely, a grid may show alternative parallel sections of a form to the left and right, leaving some space for alignment in the primary view. This communicates the same information for teams used to the convention, with less design effort.

For me, figjams can be ideal because of their simplicity and ability to create multiple outflows within a diagram as a low-fidelity prototype. They offer various arrows and lines for connecting elements, enabling you to easily create low-fidelity prototypes with multiple outflows. This step in prototyping has always been super helpful to me in visually mapping how front-end form options connect to conditional flows. Using Figjams, you can easily demonstrate with color or lines how different fields might show, hide, enable, disable, or change their required status, providing a clear, visual representation of conditional form flow.

Like before, Figjams can be a great tool for mapping out the logic and flow of ones form. Their variety of features, but clean UI to create lines and arrows connecting logic is particularly useful for creating detailed flowcharts or system designs, like UML diagrams, to represent the various outflows based on user input.

Once armed with your creative instrument, embark on the artistic journey of crafting your form's layout. At this initial stage, shed concerns about the finer details and aesthetics; instead, channel your energies into sculpting the very essence of structure and hierarchy for your form elements. Employ the tools of boxes, lines, labels, and placeholders as your artistic strokes, breathing life into the fields, buttons, and instructional nuances of your form. Dare to unite kindred fields, let headings and labels be the guiding constellations, and banish chaos by steering clear of clutter and the prospect of endless scrolling.

If a Figjam is not possible or not within one's skillset, a good old-fashioned pen and paper will never lead you astray. A drawing tablet, iPad, etc is also useful alongside any notes application when mapping out form logic. If using pencil and paper, one way to digitize quickly is to make use of Adobe Scan. It can be highly useful to get a clean PDF of anything not initially created digitally.