OVERVIEW
Target audience: Site Administrators, Site Managers, Site Editors
A webform Layout Box in the Web Management System (WMS) allows components to be grouped and displayed horizontally or vertically.
NOTES:
- Site Administrators and Site Managers can create webforms, while Site Editors may edit but not publish webforms.
- Before starting to use a Layout Box, you need to understand the basics of webforms in the WMS. See:
In this article:
How to use the Layout Box component
A relatively simple component with limited settings, Layout boxes can be used in combination with other fields to create more readable forms. With some configuration, it can work with most webform components.
Below are some basic steps to display fields in a single row:
- Create a simple webform (node/add/webform) e.g., Application form with two textfields and Save.
- Add a Layout Box component
- Name it Layout Box 1 and it will have the same label and form key: layout_box_1
- Name it Layout Box 1 and it will have the same label and form key: layout_box_1
- Nest the two textfields so that they become children of layout_box_1 and Save
The two textfields will now be displayed side by side.
Functionality
NOTE:
When a Layout box is added for the first time:
- An Edit component page will not appear as it normally would — the Layout box will just be added to the form
- The Label will be the same as the Form Key
Layout boxes have limited settings. When the Edit link is clicked, only three configurable options will appear.
This article will focus on Alignment which provides three options:
- Horizontal
- Equal Width
- Vertical
Display fields horizontally
There are two kinds of horizontal alignment available:
- Horizontal
- Equal width
Horizontal is the default, while Equal width enables fields to be displayed in columns with the same width.
Note: Equal width alignment currently only works with Fieldset components.
Display fields vertically
To see how the Vertical alignment option works, refer to the Application Form in How to use the Layout Box component:
- Edit layout_box_1
- Change the alignment to Vertical and Save component
Display fields in a grid
Vertical and horizontally-aligned Layout boxes can be combined to display fields in a grid-like layout.
To see how fields can be displayed in a grid:
- Edit the Application Form and add another Layout Box
- Name it Container A to make it distinct from the other two
- By default, it will have Horizontal alignment
- Move container_a to the top and move layout_box_1 and layout_box_2 so that both are nested under container_a, then Save
- View the form. All four textfields are now displayed in a grid:
Grids with Fieldsets
In cases where:
- A border is required to delineate columns
- A visible title is required to identify each column
a vertically-aligned Layout box can be substituted with a Fieldset.
Here is the same form but with layout_box_1 and layout_box_2 replaced by fieldsets labelled Customer 1 and Customer 2
In the Form components, container_a (which has a horizontal alignment) is parent to both Fieldsets:
NOTE:
When deleting Layout boxes or Fieldsets with nested fields, it is necessary to first un-nest any component that should not be deleted.
The easiest way to do this is by moving the component to the top and clicking Save. Unless the new configuration is saved, all nested fields will be deleted along with the parent.
Useful tips
Aligning fields in a single line
The following are some measures to consider when displaying multiple fields in a single line.
Maximize the available space
When using the Layout Box, first consider how much space is available. That space would be limited by the presence of other elements, such as Vertical Menus and Sidebars.
NOTE:
- Sidebars can be removed by changing the configuration of any sidebar blocks so that they do not appear on the form. See Manage blocks in the WMS.
Change the width of the fields
It is possible to display multiple components in a single row by modifying the width of various components. This can be done by:
Specifying the Width under DISPLAY settings
- The length of Emails, Formulas, and Textfields can be changed by entering a width in number of characters
- The width of Textareas are measured in columns (a width of 3 columns is roughly equivalent to 20 characters)
- For Numbers, the equivalent would be the Maximum value under VALIDATION
Changing how the component is displayed
- Dates provides options to hide or display fields like Day, Month, and Year, as well as an optional pop-up calendar
- Select Options can be displayed in a Listbox
Check the forms on mobile
When working with components that affect the display of forms, it is recommended to verify how the form will look like on mobile devices. Apart from previewing the form on popular phones, browser tools such as Chrome Web Developer can be used to emulate mobile devices.
ADDITIONAL REFERENCES: