Goal
The
...
single-page
...
complex
...
form
...
allows
...
to
...
fill
...
in
...
larger
...
amounts
...
of
...
data
...
and
...
replaces
...
the
...
existing
...
form
...
using
...
horizontal
...
tabs
...
.
...
The
...
main
...
characteristic
...
of
...
this
...
form
...
is
...
that
...
it
...
provides
...
an
...
instant
...
overview
...
over
...
all
...
key
...
values,
...
even
...
those
...
contained
...
in
...
other
...
tabs.
...
The
...
data
...
sets
...
it
...
collects
...
are
...
organized
...
using
...
vertical
...
tabs
...
to
...
make
...
the
...
forms
...
wider
...
than
...
high.
...
Inside
...
a
...
single
...
form,
...
the
...
fields
...
used
...
to
...
obtain
...
the
...
actual
...
data
...
can
...
be
...
grouped
...
using
...
various
...
grouping
...
elements
...
such
...
as
...
blocks
...
and
...
panels.
...
In
...
fact,
...
the
...
single-page
...
complex
...
form
...
builds
...
on
...
the
...
same
...
principles
...
as
...
the
...
...
...
and
...
also
...
uses
...
the
...
same
...
mechanisms
...
to
...
show
...
notification
...
messages.
...
Concept
| Mockup | ||||
|---|---|---|---|---|
|
...
|
...
|
The form groups all its data sets into settings groups, which receive one vertical tab each. Tabs which are currently not topped, have one short line to present the values of their key data fields. Don't show every value, but only key values, and try to summarize what's on a tab rather than simply listing the values. It is actually amazing how much information fits in just a couple of words - if it doesn't fit, consider splitting up one tab into several ones as you may have found a case where too much data is requested by a single settings group.
Inside a tab, the form may be subdivided into several sub groups using panels, blocks and field sets. The following image provides a rough overview of the entire form structure.
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
When not to use this form
Do not use such a form, if your form actually does contain data sets, which are more like multiple, connected steps. In such a case, use a multi-step process. Also, if the overview over all values is not a requested feature, your form may be less overwhelming if you break it up and make the parts accessible using tabs.
Notifications
Messages such as description for fields as well as warning and error messages are shown right above the bottom edge of the form, as is also shown in the mockup above. Please refer to Showing descriptions and validation messages in forms for the complete treatment of validation messages in forms.
Note that field descriptions are optional and the form may alternatively provide help screens.
Growing and shrinking dialog
If the user opens the block of a less important data set, a surrounding dialog might have to adjust its height to accommodate the entire form. It does so using a transition - introducing scrollbars is unwanted.
If a block is closed again, the dialog only reduces its height, if the reduced form occupies less than 2/3 of the current height. This avoids too many movements in the interface. If a dialog chooses to not reduce its height, the superfluous space is inserted right above any possibly showing notification message or else above the bottom edge of the form box. E.g. in the mockup above, this space would be added between the "language settings" block and the field description message (similar to what is defined for multi-step process forms).
Abort editing
If the form is shown using an overlay dialog or a dialog in a separate window, the user aborts editing by clicking the "close window" button in the upper right corner. If the form is shown on a page directly, use a "cancel" button instead.
Help screen
The form may also provide a help button offering additional information about the values it collects. Try to make it clear what you expect from the user by providing a good, initial description and clear labels in the form. Only provide an overall explanation in a help screen through the help button, if this is not enough.
Note that the dialog must not change its size to fit the help screen, but should retain its current width and height. If the help text does not fit into the current dimensions, provide a scroll bar.
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
Additional notes
If presented in a dialog, the form is embedded in a colored frame, which contains all controls, such as buttons for submitting the form, to cancel submission in a review step or for closing a help screen. The form frame should focus on content, the frame on control. If the form is presented on a page directly, leave out the frame, but still ensure that the form itself resides in a box and the controls are arranged around it using a layout much like in case of the dialog.