When creating your CF7 Skins form, you may notice that your form is starting to get a little long or confusing to follow. To help solve these problems, rather than creating separate forms or having one long form, you can section apart your content using the fieldset and legend elements.

The grouping and labelling of thematically related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully.

About fieldsets and legends

CF7 Skins uses the HTML tags fieldset and legend as the foundation for all CF7 Skins forms – see Why we use Fieldset, Legend & Lists in CF7 Skins.

The fieldset element is what groups related items of your form into one section. It also draws a box around these related items.

The legend element adds a caption to your fieldset group.

Using both of these elements makes your form easier to understand, more easily customizable in CSS (if you want advanced styling capabilities), and your form will be accessible to people with disabilities.

Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

The fieldset element allows authors to group thematically related controls and labels.

The legend element allows authors to assign a caption to a fieldset. The legend improves accessibility when the fieldset is rendered non-visually.

A long form (single fieldset) example

Let’s say you have a contact form with 2 sections: personal contact information and details about your service the person is inquiring about.

Without grouping these two sections, you would have one long form. This is what the form edit section would look like:

HTML of a long form

Form content when using only one fieldset

And this is the long, unformatted form:

Form content - using single fieldset

A long single fieldset form

Whats important to note about the above example is the opening fieldset tag, the legend that shows the title of the form (Contact Form), and the closing /fieldset tag.

A sectioned form (multiple fieldset) example

To split this form apart into 2 sections, Contact Info and Inquiry Details, you need to add a closing /fieldset tag when the personal contact information section is done. Then, add an opening fieldset tag at the start of the next section. In the Form section of your Contact Form 7 form this would look like:

Form content - using multiple fieldsets html

Form content when using multiple fieldsets

Note: It is required that the fieldset and legend components are used together. A fieldset cannot be used without a legend and visa versa.

Form content - using multiple fieldsets

Using multiple fieldsets to group your form into sections

The key here is to ensure that each section of your form is wrapped in the opening fieldset and closing /fieldset tags while including a legendTitle/legend after the opening fieldset. Once you have your sections laid out like this, your form will be sectioned apart into related groups.

Using fieldsets and legends will make your form more easy to read and understand, it will be more accessible for those with disabilities, and, even with all of these different groups, it will keep the style you chose using CF7 Skins.

Extra reading:
Fieldsets, Legends and Screen Readers
W3C – Adding structure to forms: the FIELDSET and LEGEND elements

%d bloggers like this: