Organizing elements in Webform containers

Containers in forms serve an important function by organizing content into logical, easy-to-read segments that provide better context to visitors completing your forms.

How to create and add elements to containers

  1. Once your Webform instance is created, click the + Add element button to begin.
  2. Select one of the Container types from the Category column. The full list of element examples can be seen on this sample form page.
    A visual example of all the container types available in the Webforms module.
  3. Once selected, you can return to your form's element list to see your new container, which will also now include its own + Add element button. This is to add form elements that belong specifically inside of your container.
    Example of an About us container with its own Add element button.
  4. This is the resulting output the visitor will see on the form:
    A fieldset shows a title of About you with two nested fields for the visitor to enter their first and last names.
  5. This is how containers with elements inside of them will be listed in your element list:
    Nested elements inside of a container.
TIP: Anywhere you see the cross pull handle to the left of the Title name, you are able to re-order the elements in whatever order you want by dragging 'n' dropping the element into a new position in the list.