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
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
legend as the foundation for all CF7 Skins forms – see Why we use Fieldset, Legend & Lists in CF7 Skins.
fieldset element is what groups related items of your form into one section. It also draws a box around these related items.
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:
And this is the long, unformatted 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
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:
Note: It is required that the fieldset and legend components are used together. A fieldset cannot be used without a legend and visa versa.
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
/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.