Webform Layout Box in the WMS


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.

note

NOTES:

  1. Site Administrators and Site Managers can create webforms, while Site Editors may edit but not publish webforms.
  2. 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:

  1. Create a simple webform (node/add/webform) e.g., Application form with two textfields and Save.

  2. Add a Layout Box component
    • Name it Layout Box 1 and it will have the same label and form key: layout_box_1

  3. Nest the two textfields so that they become children of layout_box_1 and Save
    Nesting the textfields

The two textfields will now be displayed side by side.


Functionality

note

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:


Display fields horizontally

There are two kinds of horizontal alignment available:

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:

  1. Edit layout_box_1
  2. 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:

  1. Edit the Application Form and add another Layout Box
  2. Name it Container A to make it distinct from the other two
    • By default, it will have Horizontal alignment
  3. 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
    Nested fields example
  4. View the form. All four textfields are now displayed in a grid:
    Textfields in a grid example


Grids with Fieldsets

In cases where:

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
Fieldsets in a Layout Box example



In the Form components, container_a (which has a horizontal alignment) is parent to both Fieldsets:
Layout Box containing fieldsets

note

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

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

Changing how the component is displayed

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.


references

ADDITIONAL REFERENCES: