Now that we have two distinct groups of input fields on our form, that is, speaker personal information and presentation information, it would make our form more organized if we had a way to clearly separate the two groups of fields. HTML (Hypertext Markup Language) enables field grouping by means of fieldsets.
We're going to add two fieldsets to our form to improve the organizational layout of the form by separating our input fields into their respective groups.
- Add a new fieldset component named Speaker Details and just accept the default settings by saving the component.
- Add and save another fieldset component named Presentation Details.
- Now we're going to drag each input field into its respective fieldset by grabbing the drag handle (the cross-shaped symbol with arrow heads on the tips) that appears to the left of the component label on the components overview page as follows:
- Position the mouse pointer over the drag handle next to First name, hold down the left mouse button and drag the field down immediately under the Speaker Details fieldset component.
- Move the mouse pointer slightly to the right so that First name is indented somewhat and release the mouse button:
- Let's repeat the process for Last name and Email address also, positioning them just below First name and similarly indented.
- Drag and drop the Presentation title and Synopsis fields into the Presentation Details fieldset.
- As the warning message indicates, the repositioned field sequences will not be stored until we click on the Save button, so let's click that now.
Our properly organized components overview table should now look like the following screenshot:
The grouping of fields operates on the principle of parents and children. The component that contains other components is the parent component. All components on the form are children elements of the form itself. These fieldsets are children of the form, but parents of the components they contain.
A neat trick with fieldsets that Webform exposes on the fieldset configuration page is collapsible fieldsets. This setting turns the fieldset name into a clickable link, which when clicked, will either expand the fieldset so that all of its child fields are visible or collapse the fieldset and hide all of its children, depending on the current mode of the fieldset. To enable this functionality we need to check the box adjacent to Collapsible.
We can also specify that the fieldset should initially be collapsed when the form first renders by checking the Collapsed by Default box.
We can make use of our Drupal themes Cascading Style Sheet (CSS) files to make the fieldsets stand out more prominently on the form. Most theme CSS files will have entries for fieldsets and their legends (a legend is the CSS/HTML property that relates to the name we gave to our fieldset component). We can also specify a different color or thickness for the fieldset border.
All of the components may be similarly custom-themed if we so desire. If CSS is something unfamiliar to us, then we can work through some of the many excellent tutorials that are available online to discover just how much power this gives us in terms of the final presentation of our form. We may also refer to Chapter 7, Theming Webform where we cover the adding of customized CSS rules.
When we make changes to our theme CSS files we may need to clear the website caches to ensure that our changes take effect. This can be done by clicking on Configuration | Performance | Clear all caches.